1 回答
TA贡献13条经验 获得超3个赞
<!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(){
//判断是否超出图片数
if(current >= $('#imgs img').length) current = 0;
var left = current * -width;
$('#imgs').animate({'marginLeft':left + 'px'}, 300);
current++;
}, 500)
}
start();
//鼠标移动上去停止
//增加一些数字按钮,同样有鼠标事件
</script>
</html>
- 1 回答
- 0 关注
- 976 浏览
相关问题推荐
添加回答
举报