码迷,mamicode.com
首页 > 其他好文 > 详细

无缝链接轮播图

时间:2018-12-02 21:12:48      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:head   red   over   pad   comm   out   else   停止   osi   

 <style>
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;

}

img {
vertical-align: top;
}

/*取消图片底部3像素距离*/
.box {
width: 300px;
height: 200px;
margin: 100px auto;
background-color: pink;
border: 1px solid red;
position: relative;
overflow: hidden;
}

.box ul li {
float: left;
}

.box ul {
width: 1500px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="screen">
<ul>
<li><img src="imgs/01(1).jpg" /></li>
<li><img src="imgs/02(2).jpg" /></li>
<li><img src="imgs/03(3).jpg" /></li>
<li><img src="imgs/04(4).jpg" /></li>
<li><img src="imgs/01(1).jpg" /></li>
</ul>
</div>
<script src="../DOM/commer.js"></script>
<script>
var current = 0;//只声明了一次
function f1() {
var ulObj = ver("screen").children[0];
current -= 10;
if (current < -1200) {
ulObj.style.left = 0 + "px";
current = 0;
} else {
ulObj.style.left = current + "px";
}
}
var timeId=setInterval(f1, 20);
ver("screen").onmouseover=function () {
//停止
clearInterval(timeId);
};
ver("screen").onmouseout=function () {
//继续
timeId=setInterval(f1, 20);
};
</script>

无缝链接轮播图

标签:head   red   over   pad   comm   out   else   停止   osi   

原文地址:https://www.cnblogs.com/lujieting/p/10055167.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!