首页 > 其他 > 详细

简单轮播动画

时间:2018-10-25 14:58:25      阅读:174      评论:0      收藏:0      [点我收藏+]

$(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)
}
})

})

简单轮播动画

原文:https://www.cnblogs.com/big2cat/p/9849652.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!