一个实用的图片切换支持点击切换和自动轮播
不经意间看到了以前写的这个小东西，就贴上来了，支持点击切换和自动轮播，供前端新手看看吧！
代码如下：
<divclass="scroll_div"> <ulclass="pic"> <li><imgsrc="img/pic_1.jpg"/></li> <li><imgsrc="img/pic_2.jpg"/></li> <li><imgsrc="img/pic_3.jpg"/></li> <li><imgsrc="img/pic_4.jpg"/></li> <li><imgsrc="img/pic_5.jpg"/></li> </ul> <ulclass="btn"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> <li>项目五</li> </ul> </div>
html
此处只需将图片路径改成你本地的即可。
.scroll_div{width:1000px;height:370px;margin:0auto;padding:10px;}
.scroll_div.pic{width:820px;height:370px;overflow:hidden;position:relative;float:left;}
.scroll_div.picli{width:820px;height:370px;position:absolute;top:0;left:0;display:none;}
.scroll_div.btn{float:right;width:173px;}
.scroll_div.btnli{width:173px;height:66px;display:block;float:left;text-align:center;color:#fff;font:18px/100%"微软雅黑";font-weight:bold;background:#008dd8;margin-bottom:10px;line-height:66px;cursor:pointer;}
.scroll_div.btnli.on{background:#d73737;}
li{list-style:none;}
css
$(function(){
varlistLen=$(".picli").length,i=0,setInter,speen=3000;
/*图片轮播*/
$(".btnli:last").css({"margin":"0px0px0px0px"});
$(".btnli:first").addClass("on");
$(".picli:first").show();
$(".btnli").each(function(index,element){
$(element).click(function(){
i=index;
$(this).addClass("on").siblings().removeClass("on");
$(".picli").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;};
$(".btnli").eq(i).addClass("on").siblings().removeClass("on");
$(".picli").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
}
outPlay=function(){
setInter=setInterval("out_fun()",speen);
}
outPlay();
})