利用html实现图片滑动

2024-10-20 08:23:50

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、最终结果