不经意间看到了以前写的这个小东西,就贴上来了,支持点击切换和自动轮播,供前端新手看看吧!
代码如下:
- 项目一
- 项目二
- 项目三
- 项目四
- 项目五
html
此处只需将图片路径改成你本地的即可。
css
$(".btn li").each(function(index,element){
$(element).click(function(){
i = index;
$(this).addClass("on").siblings().removeClass("on");
$(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
})
$(element).hover(function(){
clearInterval(setInter);
},function(){
outPlay();
});
})
out_fun = function(){
if(i < listLen){i++;}else{i=0;};
$(".btn li").eq(i).addClass("on").siblings().removeClass("on");
$(".pic li").eq(i).animate({opacity:"show"},300);
}
outPlay = function(){
setInter = setInterval("out_fun()",speen);
}
outPlay();
})