轮播（纯天然手写，没用插件）

第一次写轮播，以前总是用插件，所以遇到好多坑

html

<div class="contain">
<div>
<img src="/Public/Ucenter/img/zuo.png" style="position:absolute;top:30%;float:left;width:36px;height:70px;left: -7%;top:21%;" class="zuojiantou">
<ul class="aul">
<li><img src="/Public/Ucenter/img/mm1.png" class="liimg"></li>
   </ul>
<ul class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img src="/Public/Ucenter/img/you.png" style="position:absolute;top:30%;float:right;width:36px;height:70px;left:104%;top:21%;" class="youjiantou">
</div>

<script>

var timer=null; 
 var timer=setInterval(lunbo,3000);   //到时候这个放开

$(".circle li").eq(0).css("background","#eece5f");//默认第一个原点变色
  //点击左箭头
   num=1;
  $(".youjiantou").click(function(){
     num++;
  $(".liimg").attr("src","/Public/Ucenter/img/mm"+num+".png").animate({opacity:"0"},300,function(){$(this).animate({opacity:"1"},200)});
   $(".circle li").css("background","white");
   //当前对应的原点开始
   if((num-1)==4){
    $(".circle li").eq(0).css("background","#eece5f");
   }
   $(".circle li").eq(num-1).css("background","#eece5f");
  if(num>4){
  num=1;
  $(".liimg").attr("src","/Public/Ucenter/img/mm"+num+".png").animate({opacity:"0"},300,function(){$(this).animate({opacity:"1"},200)});
  } 
  });
  //左箭头结束

 //右箭头开始
   $(".zuojiantou").click(function(){
  num--;
   //当前原点开始
   $(".circle li").css("background","white");
     if((num-1)==4){
    $(".circle li").eq(0).css("background","#eece5f");
   }
   $(".circle li").eq(num-1).css("background","#eece5f");
  if(num<=0){
  num=4;
   $(".liimg").attr("src","/Public/Ucenter/img/mm"+num+".png").animate({opacity:"0"},300,function(){$(this).animate({opacity:"1"},200)});
  }else{
   $(".liimg").attr("src","/Public/Ucenter/img/mm"+num+".png").animate({opacity:"0"},300,function(){$(this).animate({opacity:"1"},200)});;
     };
 
   });
   //右箭头结束

//banner图的小原点
$(".circle li").hover(function(){
clearInterval(timer);
 num=$(this).index();
 num=num+1;
$(".aul li img").attr("src","/Public/Ucenter/img/mm"+num+".png").animate({opacity:"0"},300,function(){$(this).animate({opacity:"1"},200)});
$(".circle li").css("background","white");
$(".circle li").eq(num-1).css("background","#eece5f");
},function(){
 timer=setInterval(lunbo,3000);
 });

function lunbo(){
num++;
  $(".liimg").attr("src","/Public/Ucenter/img/mm"+num+".png").animate({opacity:"0"},300,function(){$(this).animate({opacity:"1"},200)});
   $(".circle li").css("background","white");
   //当前对应的原点开始
   if((num-1)==4){
    $(".circle li").eq(0).css("background","#eece5f");
   };
   $(".circle li").eq(num-1).css("background","#eece5f");
  if(num>4){
  num=1;
  $(".liimg").attr("src","/Public/Ucenter/img/mm"+num+".png").animate({opacity:"0"},300,function(){$(this).animate({opacity:"1"},200)});
  };
  }

</script>

一开始遇到的问题，解决方案：

 上面“鼠标移动到原点”的这儿的setInterval，其实已经新开启了一个timer，早不是下面“轮播js”的timer了。 

 等逻辑写完了，代码优化一下吧，没有对齐，没有变量缓存，没有面向对象，这完全是用生命在编程。 

 你最上面是清了, 但你后面又开了定时器,没赋值给timer,所 以你每hover一次出来一个, 然后你还清不掉它..

 所以hover的次数越多,跑的越快. 

优化方案：

 过去标签固有的属性，比如你获取的那个src属性，不要用attr，用prop 

 自定义的标签属性才用attr，性能会好些 

 另外，每次获取元素都要遍历整个dom，代价是昂贵的，在同一个方法里边如果要多次获取某个元素，最好是用一个局部变量保存起来

 比如你的 .circle li 

 var  aa=$(".cli")
然后就直接aa  就可以了