本文實例為大家分享了jQuery輪播效果展示的具體代碼，供大家參考，具體內容如下
jQ代碼：
在寫jQuery代碼之前一定要先導庫，此處我用的是3.0的庫
<script src="jquery-3.0.0.js"></script> <script type="text/javascript"> var timer; $(function() { //設置圖片向左移 imgshow(); //點擊暫停按鈕事件 $(".pause").click(function () { clearInterval(timer); }); //點擊播放按鈕事件 $(".play").click(function () { imgshow(); }); //點擊左按鈕 $(".prev").click(function () { imganimation("left"); }); //點擊右按鈕 $(".next").click(function () { imganimation("right"); }); function imganimation(res) { //圖片向左走的輪播 if(res=="right"){ //animate()動畫第一個li向左移動20% $(".lilist:first").animate({ "marginLeft": "-20%" }, 700, "linear", function () { //這個li回到原來的位置 $(this).css("marginLeft", "0px"); //將它追加到ul的最后的位置 $(this).appendTo($(".ullist")); }); //設置小框的圖片輪播，原理與大框圖片輪播一致 $(".s_lilist:first").animate({ "marginLeft": "-20%" }, 650, "linear", function () { $(this).css("marginLeft", "0px"); $(this).appendTo($(".s_ullist")); }); }else { //圖片向右走，與向左的原理相同 $(".lilist:first").animate({ "marginLeft": "20%" }, 700, "linear", function () { $(this).css("marginLeft", "0px"); $(".lilist:last").prependTo($(".ullist")); }); $(".s_lilist:first").animate({ "marginLeft": "20%" }, 650, "linear", function () { $(this).css("marginLeft", "0px"); $(".s_lilist:last").prependTo($(".s_ullist")); }); }; }; //默認圖片自動向左走 function imgshow() { timer = setInterval(function (){ imganimation("right"); } , 2000); }; }); </script> css樣式：
* { margin: 0; padding: 0; } .divbg { width: 100%; height: 350px; /*overflow: hidden;*/ position: relative; } .mb { width: 30%; height: 350px; background: rgba(0, 0, 0, 0.3); position: absolute; } .mb:first-child { left: 0px; } .mb:nth-child(2) { right: 0px; } .ullist { width: 200%; height: 350px; margin-left: -50%; } .lilist { width: 20%; height: 350px; list-style: none; float: left; } .imglist { width: 100%; height: 100%; } .divblock{ width: 20%; height: 70%; border: 4px solid rgba(255, 255, 255, 0.32); position: absolute; z-index: 5; left: 46%; top: 15%; overflow: hidden; } .s_mb{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; z-index: 10; } .s_ullist{ width: 500%; height: 100%; margin-left: -200%; } .s_lilist{ width: 20%; height: 100%; list-style: none; float: left; } .s_imglist{ height: 100%; width: 100%; } .s_mb img{ margin-left: 16%; margin-top: 65%; cursor: pointer; }html樣式：
<div class="divbg"> <div class="divblock"> <div class="s_mb"> <img class="prev" src="./img2/btn_prev.png" /> <img class="pause" src="./img2/btn_pause.png" /> <img class="play" src="./img2/btn_play.png" /> <img class="next" src="./img2/btn_next.png" /> </div> <ul class="s_ullist"> <li class="s_lilist"> <img class="s_imglist" src="img2/2121.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2122.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2123.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2124.jpg" /> </li> <li class="s_lilist"> <img class="s_imglist" src="img2/2123.jpg" /> </li> </ul> </div> <div class="mb"></div> <div class="mb"></div> <ul class="ullist"> <li class="lilist"> <img class="imglist" src="img2/2121.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2122.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2123.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2124.jpg" /> </li> <li class="lilist"> <img class="imglist" src="img2/2123.jpg" /> </li> </ul> </div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
