Contoh dalam artikel ini menerangkan kaedah pelaksanaan penukaran tayangan slaid gambar yang pudar dan pudar. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: jQuery kesan penukaran tayangan slaid gambar pudar <br> badan{font-size:12px;letter-spacing:1px;font-family:"Microsoft YaHei";line-height:1.8em;}<br> div,ul,li{margin:0; padding:0;}<br> .slides{position:relative;width:700px;height:300px;overflow:hidden;border:1px solid #ccc;}<br> .slides img{width:700px; tinggi:300px;}<br> .slides .ico{position:absolute; right:8px;bottom:6px;}<br> .slides .ico li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid #cecece;font-family:Arial,Helvetica,sans- serif;text-align:center;margin:2px;padding:1px;cursor:pointer;}<br> .slides .ico li.high{background:#7f0019;color:#fff;font-weight:bolder;}<br> <br> $(fungsi(){<br> var _img=$('.slides img');<br> var _len=_img.length;<br> var _index=0;<br> var _moving;<br> //Masukkan nombor indeks imej<br> var _ul='<ul>'<br> untuk(var i=1; i<=_len; i ){<br /> _ul=_ul '<li>' i '</li>';<br> }<br> _ul=_ul '</ul>';<br> $('div.ico').append(_ul);<br> var _ico=$('.ico li');<br> //Silang nombor<br> _ico.mouseover(function(){<br> _index=_ico.index(ini);<br> _img.filter(':visible').fadeOut(300,function(){<br> _img.eq(_index).fadeIn(300);<br> })<br> $(this).addClass('high').siblings().removeClass('high');<br> }).eq(0).mouseover();<br> //Auto kecerunan<br> _moving=setInterval(autoShow,2000);<br> _img.hover(function(){clearInterval(_moving)},function(){<br> _moving=setInterval(autoShow,2000);<br> })<br> fungsi autoShow(){<br> _indeks ;<br> if(_index==_len) _index=0;<br> _ico.eq(_index).trigger('mouseover');<br> };<br> });<br> </skrip><br> </head><br> <badan><br> Apabila pratonton kesan, ralat akan digesa di sudut kiri bawah, dan kesannya tidak dapat dilihat selepas menyegarkannya sudah tentu, dalam penggunaan sebenar, masalah seperti itu tidak akan berlaku. <br><br> <!--Tambahkan kod berikut antara <body> dan </body>--><br> <div class="slides"><br> <img src="/images/m02.jpg" title="demo" alt="demo"><br> <img src="/images/m01.jpg" title="demo" alt="demo"><br> <img src="/images/m03.jpg" title="demo" alt="demo"><br> <img src="/images/m04.jpg" title="demo" alt="demo"><br> <img src="/images/m05.jpg" title="demo" alt="demo"><br> <div class="ico"></div><br> </div><br> </body><br> </html></div> <p>Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang. </p>