轮播图练手

把所有的图片通过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)