码迷,mamicode.com
首页 > 其他好文 > 详细

简单轮播动画

时间:2018-10-25 15:35:57      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:index   btn   效果   span   set   next   scree   左移   定时   

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

})

简单轮播动画

标签:index   btn   效果   span   set   next   scree   左移   定时   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!