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 關注
- 1528 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消