用HTML语言怎样使图片连续的从左到右滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用HTML语言怎样使图片连续的从左到右滚动相关的知识，希望对你有一定的参考价值。
参考技术A 有这个标签。但是有bug已经被淘汰，直接用js 参考技术B 以前有marquee标签可以直接实现，目前已废弃 建议使用js或jquery去试下<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * margin: 0; padding: 0; #div1 width: 640px; height: 120px; margin: 100px auto; background-color: #646464; position: relative; overflow: hidden; #div1 ul position:absolute; left:0; top:0; overflow: hidden; background-color: #3b7796; #div1 ul li float: left; width: 160px; height: 120px; list-style: none; </style> <script> window.onload = function() var oDiv = document.getElementById('div1'); var oUl = document.getElementById('ul1'); var speed = 2;//初始化速度 oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2） var oLi= document.getElementsByTagName('li'); oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下 var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); function move() if(oUl.offsetLeft<-(oUl.offsetWidth/2))//向左滚动，当靠左的图4移出边框时 oUl.style.left = 0; if(oUl.offsetLeft > 0)//向右滚动，当靠右的图1移出边框时 oUl.style.left = -(oUl.offsetWidth/2)+'px'; oUl.style.left = oUl.offsetLeft + speed + 'px'; oBtn1.addEventListener('click',function() speed = -2; ,false); oBtn2.addEventListener('click',function() speed = 2; ,false); var timer = setInterval(move,30);//全局变量 ，保存返回的定时器 oDiv.addEventListener('mouseout', function () timer = setInterval(move,30); ,false); oDiv.addEventListener('mousemove', function () clearInterval(timer);//鼠标移入清除定时器 ,false); </script></head><body> <input id="btn1" type="button" value="向左"> <input id="btn2" type="button" value="向右"> <div id="div1"> <ul id="ul1"> <li><img src="img/img_1.jpg"></li> <li><img src="img/img_2.jpg"></li> <li><img src="img/img_3.jpg"></li> <li><img src="img/img_4.jpg"></li> </ul> </div></body></html>
试试？
以上是关于用HTML语言怎样使图片连续的从左到右滚动的主要内容，如果未能解决你的问题，请参考以下文章