1 回答
一種文化
TA貢獻(xiàn)13條經(jīng)驗(yàn) 獲得超3個(gè)贊
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <style>
? ? ? ? *{margin:0; padding:0;}
? ? ? ? #box{width:500px; overflow:hidden;}
? ? ? ? #imgs{width:100000px;}
? ? ? ? #imgs img{float:left;}
? ? </style>
? ? <script src="../../js11-jq02/jquery-1.7.2.min.js"></script>
</head>
<body>
? ? <div id="box">
? ? ? ? <div id="imgs">
? ? ? ? ? ? <img src="imgs/1.jpg" width="500" alt="" />
? ? ? ? ? ? <img src="imgs/2.jpg" width="500" alt="" />
? ? ? ? ? ? <img src="imgs/3.jpg" width="500" alt="" />
? ? ? ? ? ? <img src="imgs/4.jpg" width="500" alt="" />
? ? ? ? ? ? <img src="imgs/5.jpg" width="500" alt="" />
? ? ? ? </div>
? ? </div>
</body>
<script>
? ? var current = 1;
? ? var width = $('#imgs img').width();
? ? function start(){
? ? ? ? setInterval(function(){
? ? ? ? ? ? //判斷是否超出圖片數(shù)
? ? ? ? ? ? if(current >= $('#imgs img').length) current = 0;
? ? ? ? ? ? var left = current * -width;
? ? ? ? ? ? $('#imgs').animate({'marginLeft':left + 'px'}, 300);
? ? ? ? ? ? current++;
? ? ? ? }, 500)
? ? }
? ? start();
? ? //鼠標(biāo)移動(dòng)上去停止
? ? //增加一些數(shù)字按鈕，同樣有鼠標(biāo)事件
</script>
</html>
添加回答
舉報(bào)
0/150
提交
取消