本文主要和大家介绍了Jquery如何实现轮播器的具体步骤与相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。
1 2 3 4 5
Css代码
Jquery代码
$(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显示到p的当前窗口
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);
}
});
