一个实用的图片切换支持点击切换和自动轮播
不经意间看到了以前写的这个小东西,就贴上来了,支持点击切换和自动轮播,供前端新手看看吧!
代码如下:
<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(); })