模仿tmall主页效果 做的一个轮播

学后台的对于前端挺菜，基础练习阶段，模拟做个天猫主页。遇到的一些问题，舍友前端大神说我js写的太杂，jquery和js混写并不好）：，一开始写得两个函数一个自动变换一个手动变换挺不好计时器各种错乱，换成一个好点了了，后来也js自己用计数器弄错了很多很多地方，而且发生了很多问题，过渡计时器加一个animated在图片过渡阶段封死click属性，防止计数器产生错误。感谢我舍友给的指点了。菜鸟的我当笔记记录一下吧。。

得出的效果是这样子的

html
`

  <div id="main-banner">
        <img class="content-img"  src="img/img1.jpg">
        <img class="content-img"  src="img/img2.jpg">
        <img class="content-img"  src="img/img3.jpg">
        <img class="content-img"  src="img/img4.jpg">
        <img class="content-img"  src="img/img5.jpg">

        <div id="slider-con">
          <li class="slider selected"></li>
          <li class="slider "></li>
          <li class="slider"></li>
          <li class="slider"></li>
          <li class="slider"></li>
        </div>

    <div id="main-content">
    </div>
</div><div id="slider-con">

          <li class="slider selected"></li>
          <li class="slider "></li>
          <li class="slider"></li>
          <li class="slider"></li>
          <li class="slider"></li>
        </div>

    <div id="main-content">
    </div>
</div>`

js

 var i,m;
  var de_timer;
  var Timer;
  var indexb=0;
  var indexf=0;  //用于存取淡出和淡入图片的下标
  var time=3000;  
  var animated = false;
$(document).ready(function(){
   // playimg();

playimg();
   $(".slider").click(function(){
    if(animated){
      console.log(123);
      return;
    }
      clearInterval(Timer);   
        indexb=$(".slider").index(this);
        // console.log("目前选中的"+indexb);
        // console.log("前面一个是"+indexf);
                            //清掉timer计时器
        changeimg();
        playimg();


      });
 });



function playimg()
{
   Timer=setInterval(function(){

    indexb=(indexb+1)%5;
changeimg();
   },3000);
}



function changeimg()                       //手动的
{ m=0;
    animated = true;                        //清掉de_timer计时器
     $('.slider').eq(indexf).removeClass('selected');             //我目前选中的上一个图片
     $('.slider').eq(indexb).addClass('selected');       //我目前选中的图片
  de_timer=setInterval(function(){
    m=m+0.1;
   $('.content-img').eq(indexf).css("opacity",1-m);
   $('.content-img').eq(indexb).css("opacity",m);  
   if(m>=1)
     {
        animated = false;
        indexf=indexb;                                //结束后back=front
        // console.log("indexf被手动赋值成"+indexf);
        clearInterval(de_timer);

      }
 },50);
}

css

#tanx-content
{
position:relative;
width:1300px;
height:500px;
/*background-color: #f2f2f2;*/

}
#tanx-content #main-banner
{  position: absolute;
    height:500px;

}
#tanx-content #main-content
{  
    margin:0 auto;
   width:1012px;
   height:500px;
}

.content-img
{  float: right;
    position: absolute;
}
#slider-con
{   
    position: absolute;
    left:50%;
     transform: translateX(-50%);   
    bottom:13px;
      z-index: 99;
     width:300px;
     height: 29px;

}
#slider-con .slider
{  /* list-style-type: none;*/
    position:  relative;
    display: inline-block;
    width:21.97px;
    height: 21.97px;
    margin-left: 7px;
    background:url(img/slider.png) no-repeat;
    border-radius: 50%;
   cursor: pointer;
}
#slider-con .selected
{
    background:url(img/selected.png) no-repeat;
}