效果图如下：
代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #imgList{ width:730px; height:420px; margin:100px auto; border:1px solid pink; position:relative; border:6px dashed pink; } #imgList:hover .pre,#imgList:hover .next{ display:block; } #imgList .img{ position:absolute; top:0; left:0; z-index:-1; } ul li{ list-style-type:none; float:left; } #imgList .num { float:right; margin-top:10px; } #imgList .num ul li{ width:16px; height:16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:1px solid white; margin-right:6px; } #imgList .num ul li a{ display:block; width:16px; height:16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:1px solid white; margin-right:6px; } #imgList .num ul li a:hover{ cursor:pointer; background-color:pink; } #button .pre{ width:60px; height:80px; background-color:rgba(0,0,0,0.5); color:white; font-size:40px; text-align:center; line-height:80px; vertical-align: middle; font-weight:bold; float:left; margin-top:170px; } .pre,.next{ display:none; } .pre:hover,.next:hover{ cursor:pointer; } #button .next{ width:60px; height:80px; background-color:rgba(0,0,0,0.5); color:white; font-size:40px; text-align:center; line-height:80px; vertical-align: middle; font-weight:bold; float:right; margin-top:170px; margin-right:-94px; } #imgList .img ul li{ width:730px; height:420px; background-image:url("s1.jpg"); } .class{ background-color:pink; } </style> </head> <body> <div id="imgList"> <div class="img"> <ul> <li id="imgLi" data="0"></li> </ul> </div> <div class="num"> <ul> <li class="class"><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </div> <div id="button"> <div class="pre" onclick="pre();"><</div> <div class="next" onclick="pre();">></div> </div> </div> <script src="jquery-1.10.2.min.js"></script> <script> var imgArr=["s1.jpg","s2.jpg","s3.jpg","s4.jpg"]; var index=0; function show(){//自动切换 if(index<3){ index++; //改变li的背景图片并加上一个data属性值 $("#imgLi").css("background-image","url("+imgArr[index]+")").attr("data",index); //改变选中圆点 $(".num ul li").eq(index).addClass("class").siblings().removeClass("class"); }else{ index=0; $("#imgLi").css("background-image","url("+imgArr[index]+")").attr("data",index); $(".num ul li").eq(index).addClass("class").siblings().removeClass("class"); } } setInterval(show,6000); function pre(){//上一个按钮 var data= $("#imgLi").attr("data"); var num=parseInt(data)-1; if(num<0){ num=3; $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num); $(".num ul li").eq(num).addClass("class").siblings().removeClass("class"); }else{ $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num); $(".num ul li").eq(num).addClass("class").siblings().removeClass("class"); } } function next(){//下一个按钮 var data= $("#imgLi").attr("data"); var num=parseInt(data)+1; if(num>3){ num=0; $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num); }else{ $("#imgLi").css("background-image","url("+imgArr[num]+")").attr("data",num); } } $(".num ul li").click(function(){//圆点按钮 $(".num ul li").eq($(this).index()).addClass("class").siblings().removeClass("class"); var number=$(this).index(); $("#imgLi").css("background-image","url("+imgArr[number]+")").attr("data",number); }) </script> </body> </html>
