您的位置：首页 > Web前端 > JavaScript

Javascript图片无缝滚动_妙味课堂

2016-12-08 08:25 344 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
position: relative;
width: 680px;
height: 132px;
margin:10px auto;
border: 1px solid black;
overflow: hidden;
}
#div1 ul{
position: absolute;
left:0px;
}
#div1 ul li{
list-style: none;
float:left;
width:150px;
height:112px;
padding: 10px;
}
#div1 ul li img{
width: 150px;
height: 112px;
}

</style>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aA=document.getElementsByTagName('a');

var timer=null;
var iSpeed=3;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
function fnMove() {
if(oUl.offsetLeft<-oUl.offsetWidth/2) {
oUl.style.left = 0;
}
else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
//视频中此处没有'px'单位，但是在视频中能运行
}

oUl.style.left=oUl.offsetLeft+iSpeed+'px';
};
timer=setInterval(fnMove,30);
aA[0].onclick=function () {
iSpeed=-10;
};
aA[1].onclick=function () {
iSpeed=10;
};
oDiv.onmouseover=function () {
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(fnMove,30);
}
}
</script>
</head>
<body>
<a href="javascript:;"><---</a>
<a href="javascript:;">---></a>
<div id="div1">
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航