利用html实现图片滑动
1、css代码
<style>
* {margin: 0;padding: 0;}
#div1 {width: 712px; height: 108px; margin: 100px auto;position: relative;background: red;overflow: hidden;}
#div1 ul {position: absolute;left: 0;top: 0;}
#div1 ul li {float:left;width:178px;height:108px;list-style:none;}
</style>
2、html 代码
<body>
<a href="javascrip:;">向左</a>
<a href="javascrip:;">向右</a>
<div id="div1">
<ul>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
<li><img src="1.jpg" /></li>
</ul>
</div>
</body>
3、javascrip 代码
<script>
window.onload=function()
{
var speed=2;
var a=document.getElementById('div1');
var b=a.getElementsByTagName('ul')[0];
var c=b.getElementsByTagName('li');
b.innerHTML=b.innerHTML+b.innerHTML;
b.style.width=c[0].offsetWidth*c.length+'px';
function move(){
if (b.offsetLeft<-b.offsetWidth/2) {
b.style.left='0';
}
if (b.offsetLeft>0) {
b.style.left=-b.offsetWidth/2+'px';
}
b.style.left=b.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
b.onmouseover=function(){
clearInterval(timer);
};
b.onmouseout=function(){
timer=setInterval(move,30);
};
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
}
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
}
};
</script>
4、最终结果
