< 0) { opts.index = 4; } $(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active"); $(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min }); }; //左边 $(this).find("#left").bind("click", function() { --opts.index; core(); }); //右边 $(this).find("#right").bind("click", function() { ++opts.index; core(); }); //每个icon分配事件 $(this).find(".slider_icon").on("click", "span", function() { var index = $(this).index(); opts.index = index; core(); }); //定时器 var start = function() { opts.timer = setInterval(function() { ++opts.index; core(); }, opts.speed); } $(this).hover(function() { clearInterval(opts.timer); }, function() { start(); }); start(); } }(jQuery)); 1:core方法,其实图片轮播的本质就是把当前索引的图片显示,导航icon高亮,其余的隐藏,我做的是淡入淡出 。
2:向左,向右,导航其实无非就是index的改变,jquery提供了一个index()方法,可以获得所有匹配元素中当前元素的索引,从0开始 。3:定时器,要实现图片的自动导航,无非就是每隔一定的时间,index+1 。
【jq轮播图怎么写】另外,当鼠标放入的时候,要清楚定时器,当输入移出的时候,再开启定时器 。