简单轮播动画

Posted 2021-01-15 big2cat

$(function(){

var index=1

var run=function () {　　　　//设定一个定时动画
index++;
if(index>7){
$(".screening-bd ul").css({left:"-700px"})        //使窗口向左移700px
index=2;　　　　
}
var x=-700*index+"px";

$(".content ul").animate({left:x},500)

if(index<7){
var i=index;
}else{
var i=1;
}
$(".slide .list").text(i)   //显示第N页
}

var id=setInterval(run,3000)

$(".content .article").hover(function(){
clearInterval(id)    //清除动画
},function(){
id=setInterval(action,3000)
})
// 自动效果

$(".next-btn").click(function(){
if(!$(".screening-bd ul").is(":animated")) {
index++
if(index>7){
$(".screening-bd ul").css({left:"-700px"})
index=2
}
var x=-700*index+"px"
$(".screening-bd ul").animate({left:x},500)
if(index<7){
var x=index
}else{
var x=1
}
$(".slide .list").text(x)
}
})

})