jQuery插件实现图片轮播效果

时间：2021-05-26

使用插件实现图片轮播效果：

通过设置传入的参数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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章