制作轮播图遇到的小问题

Question

<div class="datu">
    <img src="images/b0.jpg">
    <div class="yuan">
       <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
  </div>
</div>
上面的9个div是可以手动换图的按钮

var datu=setInterval(function(){
         a++;
         var b=a%9
         $('.datu img').attr('src','images/b'+b+'.jpg')
      $('.yuan div').eq(b).css('background-color','#ba2628').siblings('div').css('background-color','rgba(0,0,0,0.7)')
   },1000)
   $('.yuan div').hover(function(){
       var y=$(this).index()
      $('.datu img').attr('src','images/b'+y+'.jpg')
      $('.yuan div').eq(y).css('background-color','#ba2628').siblings('div').css('background-color','rgba(0,0,0,0.7)')
      clearInterval(datu),function(){ 
      }
   })
   
   现在的问题是一旦手动后就不会自动了
   怎样实现手动换图移出鼠标后，setInteval继续执行？

Answer 1

//加一个开关变量 go,这个控制是否执行自动跳转，hover时不让跳转它为false,不hover了继续跳转改为true;

var a = 0;
var datu=setInterval(auto,4000);
var go = true;

$('.yuan div').hover(function(){
    var y=$(this).index()
    $('.datu img').attr('src','assets/images/b'+y+'.jpg')
    $('.yuan div').eq(y).css('background-color','#ba2628').siblings('div').css('background-color','rgba(0,0,0,0.7)')
    go=false},function(){
            a=$(this).index();
            go=true;
    }
)
function auto(){
    if(go)
    {
        a++;
        var b=a%5
        $('.datu img').attr('src','assets/images/b'+b+'.jpg')
        $('.yuan div').eq(b).css('background-color','#ba2628').siblings('div').css('background-color','rgba(0,0,0,0.7)')
    }

}

Answer 2

定义一个autoPlay()方法，当鼠标mouseout时，执行该方法就好了，我写了一个完整的banner轮播图，可参看：http://mangohouse.cn/pub_bann...