<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继续执行?
定义一个autoPlay()方法,当鼠标mouseout时,执行该方法就好了,我写了一个完整的banner轮播图,可参看:http://mangohouse.cn/pub_bann...
//加一个开关变量 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)')
}
}