1 回答
一只喵__
TA贡献9条经验 获得超11个赞
一下是我刚做的一个无缝滚动的练习，望采纳！
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gundong</title>
<link rel="stylesheet" type="text/css" href="gundongCSS.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="gundongJs.js"></script>
</head>
<body>
<div>
<div>
<ul>
<li><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
<li><img src="img/03.jpg"/></li>
<li><img src="img/04.jpg"/></li>
</ul>
</div>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</body>
</html>
gundongCss.css:
*{list-style: none; margin: 0; padding: 0;}
.content{width: 400px; height: 307px; margin: 50px auto; border: 5px solid #ccc; position: relative;}
.img_div{width: 400px; height: 307px; overflow: hidden; position: relative;}
.img_div ul{width: 2000px; height: 307px; position: absolute; left: 0px;}
.img_div ul li{float: left;}
.content ol{overflow:hidden; margin: 10px auto; width: 75px;}
.content ol li{float: left; width: 13px; height: 13px; margin-right: 5px; background: url(img/00.png) no-repeat 0px -13px;}
.content ol li.current{background-position: 0px -26px;}
.leftBtn,.rightBtn{width: 52px; height: 52px; display: block; background: url(img/arr.png) no-repeat; position: absolute; top: 115px;}
.leftBtn{background-position:left top; left: -20px;}
.rightBtn{background-position: -52px top; left: 369px;}
gundongJs.js:
$(function(){
//clone第一个li放到ul里边的最后的位置
var myLi = $(".img_div ul li:eq(0)").clone(true);
var myTag = $(myLi);
$(".img_div ul").append(myTag);
//声明变量imgLeft,控制ul的left位置,初始为0
var imgLeft = 0;
//声明变量ul_num表示当前播放图片的下标，初始为0
var ul_num = 0;
//声明变量ol_num表示当前“ol-li”的下标，初始为0
var ol_num = 0;
var myFn = function(){
ul_num += 1;
if(ul_num > 4){
$(".img_div ul").css("left","0px"); //大于4的时候，left立即跳转到0px（此时展示第一张图）
ul_num = 1;//到上一步为止，展示的是第一张图，接下来该展示第二张（索引为1）了，所以设置ul_num为1
}
imgLeft = ul_num * -400;
$(".img_div ul").stop().animate({"left": imgLeft + "px"},500);
ol_num += 1;
if(ol_num > 3){
ol_num = 0;
}
$(".content ol li").eq(ol_num).addClass("current").siblings().removeClass("current");
}
//timer自动播放
var timer = null;
timer = setInterval(myFn,2000);
$(".content").hover(function(e){
clearInterval(timer);
},function(){
timer = setInterval(myFn,2000);
});
//rightBtn的click事件
$(".rightBtn").click(function(){
myFn();
});
//leftBtn的click事件
$(".leftBtn").click(function(){
ul_num -= 1;
if(ul_num < 0){
$(".img_div ul").css("left","-1600px");//小于0的时候，left立即跳转到-1600px（此时展示最后一张图）
ul_num = 3;//到上一步为止，展示的是最后一张图，接下来该展示倒数第二张（索引为3）了，所以设置ul_num为3
}
imgLeft = ul_num * -400;
$(".img_div ul").stop().animate({"left": imgLeft + "px"},500);
ol_num -= 1;
if(ol_num < 0){
ol_num = 3;
}
$(".content ol li").eq(ol_num).addClass("current").siblings().removeClass("current");
});
//ol下li的点击事件
$(".content ol li").click(function(){
ul_num = $(this).index();
ol_num = $(this).index();
imgLeft = ul_num * -400;
$(".img_div ul").stop().animate({"left": imgLeft + "px"},500);
$(".content ol li").eq(ol_num).addClass("current").siblings().removeClass("current");
});
});- 1 回答
- 1 关注
- 1474 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消