jquery版轮播图效果和extend扩展

2020-05-22 22:01:55易采站长站整理

})
$oLis.eq(step).addClass("bg").siblings().removeClass('bg')
}
//4、实现自动轮播
interval = interval || 3000;
var step = 0,autoTimer = null;
autoTimer = window.setInterval(autoMove,interval)
function autoMove(){
if(step === jsonData.length-1){
step = -1;
}
step++;
changeBanner();
}
//5、控制左右按钮的显示隐藏和自动轮播的开始和暂停
$banner.on('mouseover',function(){
window.clearInterval(autoTimer);
$bannerLeft.css("display","block")
$bannerRight.css("display","block")
}).on('mouseout',function(){
autoTimer = window.setInterval(autoMove,interval);
$bannerLeft.css("display","none")
$bannerRight.css("display","none")

})
//6、实现焦点切换
$oLis.on('click',function(){
step = $(this).index();
changeBanner();
})

//7、实现左右切换
$bannerRight.on('click',autoMove);
$bannerLeft.on('click',function(){
if(step===0){
step = jsonData.length;
}
step--;
changeBanner();
});

}

//外部使用
$().banner("bannerFir","json/banner.txt",1000)
</script>
</body>
</html>