jQuery外掛實現圖片輪播效果
阿新 • • 發佈:2020-10-20
使用外掛實現圖片輪播效果:
通過設定傳入的引數autoScroll,numControl和arrowControl的值可以顯示不同的效果
圖片輪播效果一:設定autoScroll=true,numControl=false,arrowControl=false,圖片自動輪播,當滑鼠進入時停止輪播,當滑鼠移出時繼續輪播;
圖片輪播效果二:設定autoScroll=true,numControl=ture,arrowControl=false,圖片自動輪播,同時當滑鼠指向導航數字時顯示相應的圖片;
圖片輪播效果三:設定autoScroll=true,numControl=false,arrowControl=true,圖片自動輪播,當滑鼠點選左右按鈕時,顯示相應的圖片;
動畫效果如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片輪播</title> <script type="text/javascript" src="http://libs.badu.com/jquery//1.11.1/jquery.min.js.js"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; list-style: none; } .slider{ position: relative; margin: 50px auto; width: 800px; height: 200px; overflow: hidden; } .slider ul{ position: absolute; width: 3200px; height: 200px; } .slider ul li{ float: left; width: 800px; height: 200px; } .slider ul li img{ width: 800px; height: 200px; } .slider .num{ position: absolute; right: 20px; bottom: 20px; } .slider .num span{ display: block; float: left; margin-right: 10px; width: 30px; height: 30px; line-height: 30px; color: #fff; background: #ccc; text-align: center; opacity: 0.6; } .slider .num span.active{ background: #1D5D76; } .left{ width:56px; height: 87px; position: absolute; left:10px; top:57px; background: url('images/left-arrow.png'); } .right{ width:56px; height: 87px; position: absolute; right:10px; top:57px; background: url('images/right-arrow.png'); } </style> </head> <body> <div id="slider1" class="slider"> <ul> <li><img src="images/1.jpg" alt="圖片"></li> <li><img src="images/2.jpg" alt="圖片"></li> <li><img src="images/3.jpg" alt="圖片"></li> <li><img src="images/4.jpg" alt="圖片"></li> </ul> </div> <div id="slider2" class="slider"> <ul> <li><img src="images/1.jpg" alt="圖片"></li> <li><img src="images/2.jpg" alt="圖片"></li> <li><img src="images/3.jpg" alt="圖片"></li> <li><img src="images/4.jpg" alt="圖片"></li> </ul> </div> <div id="slider3" class="slider"> <ul> <li><img src="images/1.jpg" alt="圖片"></li> <li><img src="images/2.jpg" alt="圖片"></li> <li><img src="images/3.jpg" alt="圖片"></li> <li><img src="images/4.jpg" alt="圖片"></li> </ul> </div> <script type="text/javascript" src="jQuery.slider.js"></script> <script> $(document).ready(function(){ $("#slider1").slider(); $("#slider2").slider({ //autoScroll:false,numCtroll:true }); $("#slider3").slider({ //autoScroll:false,arrowControl:true }); }) </script> </body> </html>
jQuery.slider.js
;(function ($) { $.fn.slider=function (options) { var defaults={ autoScroll: true,speed:2000,numCtroll: false,arrowControl: false } var settings=$.extend({},defaults,options),slider=$(this),ul=slider.find("ul"),li=ul.find("li"),img=li.find("imf"),width=slider.width(),height=slider.height(),len=li.length,timer=null,index=0; // ul.css({width:len*width,height:height}); // li.add(img).css({width:width,height:height}); //判斷是否自動輪播 if (settings.autoScroll) { timer=setInterval(pic,settings.speed); } //判斷是否顯示數字導航,並通過數字導航控制顯示圖片 if (settings.numCtroll){ slider.append("<div class='num'></div>") for (var i=0;i<len;i++){ slider.find(".num").append("<span>"+(i+1)+"</span>"); } slider.find(".num span").eq(0).addClass("active"); slider.find(".num span").on("mouseover",function () { $(this).addClass("active").siblings().removeClass("active"); showPic($(this).index()); }) } //判斷是夠顯示左右按鈕,並通過左右按鈕控制顯示圖片 if(settings.arrowControl){ slider.append("<span class='left'></span><span class='right'></span>"); var prev = slider.find(".left"); var next = slider.find(".right"); prev.on("click",function(){ index-=1 if(index == -1 ){ index=len-1; } showPic(index); }) next.on("click",function(){ index+=1 if(index==len){ index=0; } showPic(index); }) } //滑鼠移入時停止自動輪播 slider.on("mouseover",function(){ clearInterval(timer); }); //滑鼠移出時,檢查autoScroll的值若為true則繼續自動輪播 slider.on("mouseleave",function(){ if (settings.autoScroll) { timer=setInterval(pic,settings.speed); } }); //設定index的值,並顯示相應的圖片 function pic(){ index++; if (index==len){ index=0; } showPic(index); } //顯示正確的圖片 function showPic(index){ ul.animate({ left:-index*width }); slider.find(".num span").eq(index).addClass("active").siblings().removeClass("active"); } } })(jQuery);
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。