教你一步步用jQyery实现轮播器

教你一步步用jQyery实现轮播器

实现原理

如图，试想一下，若是将

那么当我们向左移动ul的时候并且移动的距离为

接下来我们在设置

说了一些原理，好了，直接上代码，记得引入jquery。

这是div做的布局，做的时候记得加上边框，做后在删掉，这样便于测试

1

2

3

4

5

接下来设置一下样式

用js实现点击轮播图片、自动轮播图片，鼠标移动上去停止轮播

$(function(){

$(function(){

var slide=$(".slideShow"),

navt=slide.find(".nav-t"),

ul=navt.find("ul"),

navbs=slide.find(".nav-b span"),

onwidth=ul.find("li").eq(0).width(), //获取ul下的li宽度

timer=null,

inow=0;

navt.hover(function(){

clearInterval(timer); //鼠标移上去，清除掉自动轮播功能，即定时轮播

},autoPlay);

navbs.on("click",function(){ //点击轮播事件

var me=$(this);

inow=me.index(); //此处变量用的与自动轮播函数里的相同，为的是能在随便点击后，自动轮播时按照我们点击了的继续向后轮播，这叫动态实时

ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口

navbs.removeClass("active"); //清除掉上一个点击按钮的样式

me.addClass("active"); //为当前被点击的按钮添加第一个按钮样式

});

autoPlay();

function autoPlay(){ //自动轮播函数

timer=setInterval(function(){ //开定时器

inow++;

if(inow==navbs.length){ //判断是否到了最后一张，若是到了，返回到第一张

inow=0

}

navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件，trigger为jQuery的自动调用函数

},3000);

}

});

});

看一下效果图？好的

总结

好了，以上就是利用jQyery实现轮播器的全部内容了，怎么样，要不你也做一个？希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。