使用方法
js
$(function(){
var slideBox=$(".slideBox");
var ul =slideBox.find("ul");
var oneWidth=slideBox.find("ul li").eq(0).width();
var num=slideBox.find(".spanBox span");
var length=$(".slideBox ul li").length;
var length02=$(".slideBox ul li").length-1;
var timer=null;
var sw=0;
//每个span绑定click事件,完成切换颜色和动画,以及读取参数值
num.on("click",function(){
sw=$(this).index();
ul.animate({
"right":oneWidth*sw
});
$(".spanBox span").removeClass("active");
$(".spanBox span").eq(sw).addClass("active");
});
//左右按钮的控制效果
$(".prev").click(function(){
clearInterval(timer);
sw++;
if(sw>length02)
{
sw=length02;
}
ul.animate({
"right":oneWidth*sw
});
$(".spanBox span").removeClass("active");
$(".spanBox span").eq(sw).addClass("active");
});
$(".next").click(function(){
clearInterval(timer);
sw--;
if(sw<0)
{
sw=0;
}
ul.animate({
"right":oneWidth*sw
});
$(".spanBox span").removeClass("active");
$(".spanBox span").eq(sw).addClass("active");
});
//定时器的使用,自动开始
timer = setInterval(function (){
sw++;
if(sw==length){sw=0};
num.eq(sw).trigger("click");
},2000);
//选中是去除定时器
$(".slideBox").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function (){
sw++;
if(sw==num.length){sw=0};
num.eq(sw).trigger("click");
},2000);
})
});
本插件的原理不过是加载js以后往页面里插入几个节点,非常简单,使用者可以修改源码来获得自己想要的效果
预览地址:http://www.jquery66.com/demos/js/j70/index.html
下载链接:https://u18725144.ctfile.com/fs/18725144-330281670
转载于:https://blog.51cto.com/14168515/2341045