一个滚动轮播的问题,存在bug-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

一个滚动轮播的问题,存在bug

2016-06-13 13:24:19 2103 0
<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>banner</title>
</head>
<style>
*{padding:0; margin:0; list-style:none;}
.main{ width:100%;}
.pic{ width:100%; overflow:hidden; position:relative;}
.pic ul li{ position:absolute; left:100%; width:100%;}
.pic ul li.current{ position:static;}
.pic ul li img{ width:100%;}
.abs{ position:absolute;}
.rel{ position:relative;}
.Right{position:absolute;right:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
.Left{position:absolute;left:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
</style>

<body>
<div class="main rel">
  <div class="pic">
    <ul>
      <li class="current"><img src="images/a-0.jpg"/></li>
      <li><img src="images/a-1.jpg"/></li>
      <li><img src="images/a-2.jpg"/></li>
    </ul>
  </div>
  <img class="Left abst" src="images/right.png"/>
  <img class="Right abst" src="images/left.png">
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var d=0;//当前点下标
var z=0;//之前点下标
var timer=null;//存放定时函数

$(".abst").hover(function(){
    clearInterval(timer);
},function(){
    timer=setInterval("turnRight()",3000);
});

//鼠标点击左右箭头切换
function turnRight(){
    d++;
    if(d>2){d=0};
    $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"-100%"},300);
    $(".pic ul li").eq(d).css("left","100%");
    $(".pic ul li").eq(d).stop().animate({left:"0"},300).addClass("current");
    z=d;
    console.log(d+"+"+z)
};
function turnLeft(){
    d--;
    if(d<0){d=2};
    $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"100%"},300);
    $(".pic ul li").eq(d).css("left","-100%");
    $(".pic ul li").eq(d).stop().animate({left:"0"},300).addClass("current");
    z=d;
    console.log(d+"+"+z)
};
$(".Left").click(function(){
    turnLeft();
});
$(".Right").click(function(){
    turnRight();
});
timer=setInterval("turnRight()",3000);
</script>
</body>
</html>

screenshot
screenshot
screenshot
因为做的是个宽度自适应的轮播,
现在问题是每次轮播到最后一张图片,与第一张图片的衔接没有动画效果

取消 提交回答
全部回答(0)
相关问答

1

回答

HP的is_writeable()函数存在Bug,无法准确判断一个目录/文件是否可写

2019-11-18 15:02:04 782浏览量 回答数 1

1

回答

编写一个非递归算法求出二叉搜索树中的关键字最小的元素

2018-07-21 14:21:54 1123浏览量 回答数 1

1

回答

钉钉导航栏菜单按钮有bug

2016-10-26 18:15:21 2873浏览量 回答数 1

1

回答

iOS tableview滚动底部 显示另外一个tableview

2016-07-28 16:19:29 1764浏览量 回答数 1

3

回答

iOS tableview滚动底部 显示另外一个tableview

2016-07-28 16:23:47 2388浏览量 回答数 3

1

回答

同样的一个Tomcat,在另一台机器却起不来

2016-07-18 16:47:29 1596浏览量 回答数 1

1

回答

发现一个bug啊

2016-02-02 15:46:44 4497浏览量 回答数 1

1

回答

万网域名解析的一个bug

2014-02-13 17:16:18 5971浏览量 回答数 1

9

回答

发现工单反馈页面的一个小bug

2013-03-26 17:54:57 6709浏览量 回答数 9

1

回答

bug反馈0523的版本日历无法创建预约事项

2012-06-26 18:32:48 5281浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载