首页 > 代码库 > javascript-图片横向无缝隙滚动(可在服务器运行)
javascript-图片横向无缝隙滚动(可在服务器运行)
前两次弄‘图片横向滚动‘javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了.
css代码:
1 <style type="text/css"> 2 .scroll_div { 3 width: 1000px; 4 height: 250px; 5 margin: 0 auto; 6 overflow: hidden; 7 white-space: nowrap; 8 background: #ffffff; 9 }10 11 .scroll_div img {12 width: 250px;13 height: 250px;14 border: 0;15 border: 1px #efefef solid;16 }17 18 #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {19 display: inline;20 }
javascript代码:
1 <script language="javascript"> 2 function scroll_img_left() { 3 var speed = 20 4 var scroll_begin = document.getElementById("scroll_begin"); 5 var scroll_end = document.getElementById("scroll_end"); 6 var scroll_div = document.getElementById("scroll_div"); 7 scroll_end.innerHTML = scroll_begin.innerHTML 8 function Marquee() { 9 if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)10 scroll_div.scrollLeft -= scroll_begin.offsetWidth11 else12 scroll_div.scrollLeft++13 }14 15 var MyMar = setInterval(Marquee, speed)16 scroll_div.onmouseover = function () {17 clearInterval(MyMar)18 }19 scroll_div.onmouseout = function () {20 MyMar = setInterval(Marquee, speed)21 }22 }23 </script>
html代码:
<div class=""> <div id="scroll_div" class="scroll_div"> <div id="scroll_begin"> <ul> <li><a href=""><img src="http://www.mamicode.com/image/11.jpg"/></a></li> <li><a href=""><img src="http://www.mamicode.com/image/222.jpg"/></a></li> <li><a href=""><img src="http://www.mamicode.com/image/444.jpg"/></a></li> <li><a href=""><img src="http://www.mamicode.com/image/555.jpg"/></a></li> </ul> </div> <div id="scroll_end"></div> </div> </div>
完整html页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>javascript-图片横向无缝隙滚动(可在服务器运行)</title> <style type="text/css"> .scroll_div { width: 1000px; height: 250px; margin: 0 auto; overflow: hidden; white-space: nowrap; background: #ffffff; } .scroll_div img { width: 250px; height: 250px; border: 0; border: 1px #efefef solid; } #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li { display: inline; } </style> <script language="javascript"> function scroll_img_left() { var speed = 20 var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML = scroll_begin.innerHTML function Marquee() { if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) scroll_div.scrollLeft -= scroll_begin.offsetWidth else scroll_div.scrollLeft++ } var MyMar = setInterval(Marquee, speed) scroll_div.onmouseover = function () { clearInterval(MyMar) } scroll_div.onmouseout = function () { MyMar = setInterval(Marquee, speed) } } </script></head><body onl oad="scroll_img_left()"><div style="text-align:center"> <div class=""> <div id="scroll_div" class="scroll_div"> <div id="scroll_begin"> <ul> <li><a href=""><img src="http://www.mamicode.com/image/11.jpg"/></a></li> <li><a href=""><img src="http://www.mamicode.com/image/222.jpg"/></a></li> <li><a href=""><img src="http://www.mamicode.com/image/444.jpg"/></a></li> <li><a href=""><img src="http://www.mamicode.com/image/555.jpg"/></a></li> </ul> </div> <div id="scroll_end"></div> </div> </div></div><!--//向左滚动代码结束--></body></html></td></tr></table>
javascript-图片横向无缝隙滚动(可在服务器运行)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。