把所有的图片通过position:absolute;top:0;left:0;定位在一起（注意这样写可能导致父元素没有高度，下面的点点就不能在最底部了。所以可以在最外层的div设置一个高度，宽度100%；这样可能图片就不是自适应的，缩放时高度和宽度都是不变的。）。点点作为焦点。鼠标经过第几个就显示第几个图片。还要有上一张下一张的按钮。
下面是效果图
*{margin:0;padding:0;} .content{position:relative;clear:both;width: 100%;height: 650px;overflow: hidden;} .img_list img{float:left;position:absolute;top:0;display:none;} .dot{position:absolute;z-index:222;bottom:20px;text-align: center;width:100%;} //可以让下面的焦点居中 .dot span{cursor:pointer;width:10px;height:10px;display:inline-block;text-align: center; background-color:#fff;border:3px solid #dadada;border-radius:50%;} .dot span.active{border-color:#F43D36;} .target-btn{position:absolute;top:50%;width:100%;font-size:15px;} .target-btn button{outline:none;border:none 0;width:40px;height:40px;border-radius:50%;opacity:0.8;filter:alpha(opacity=80);cursor:pointer;} .target-btn button:nth-child(1){float:left;margin-left:20px;} .target-btn button:nth-child(2){float:right;margin-right:20px;}
//第一张图片显示,点高亮 $(".img_list img").eq(0).show(); $(".dot span").eq(0).addClass("active").siblings().removeClass("active"); //点击上一页，下一页 var inde;//当前高亮的那个元素 $(".target-btn button").click(function(){ $(".dot span").each(function(){ if($(this).hasClass("active")){ inde=$(this).index(); } }) //点上一页 if($(this).hasClass("prev-btn")){ inde=inde-1<0?3:inde-1; } //点的下一页 else { inde=inde+1>3?0:inde+1; } $(".img_list img").eq(inde).fadeIn(600).siblings().fadeOut(600); $(".dot span").eq(inde).addClass("active").siblings().removeClass("active"); }) //鼠标滑过点点就显示对应的图片\\ var num;//选中的那个点的索引 $(".dot span").mouseenter(function(){ $(this).addClass("active").siblings().removeClass("active"); num=$(this).index(); $(".img_list img").hide(); $(".img_list img").eq(num).fadeIn(600).siblings().fadeOut(600); }) //定时器从第一幅图开始自己轮播, var inx=0; setT=setInterval(function(){ inx++; if(inx>3){inx=0;} $(".dot span").eq(inx).addClass("active").siblings().removeClass("active"); $(".img_list img").eq(inx).fadeIn(600).siblings().fadeOut(600); },2000)
