js实现图片向左向右轮播的动画效果的代码 5
1个回答
展开全部
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
.show{
border:5px solid #c1c1c1;
margin:100px auto;
width:500px;
height: 200px;
overflow: hidden;
}
.box{
width:400%;
position: relative;
cursor: pointer;;
}
ul{
list-style-type: none;;
}
.box ul li{
float:left;
display: block;
}
</style>
<script>
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var num=0;
function autoplay(){
num--;
$("box").style.left=num+"px";
if(num==-1200){
num=0;
}
}
var int=setInterval(autoplay,30);
$("box").onmouseover=function(){
clearInterval(int);
}
$("box").onmouseout=function(){
int=setInterval(autoplay,30);
}
}
</script>
</head>
<body>
<div class="show">
<div class="box" id="box">
<ul>
<li><img src="image/01.jpg" alt=""/></li>
<li><img src="image/02.jpg" alt=""/></li>
<li><img src="image/03.jpg" alt=""/></li>
<li><img src="image/04.jpg" alt=""/></li>
<li><img src="image/01.jpg" alt=""/></li>
<li><img src="image/02.jpg" alt=""/></li>
</ul>
</div>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
