标签：
前两次弄‘图片横向滚动‘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.offsetWidth 11 else 12 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="image/11.jpg"/></a></li>
<li><a href=""><img src="image/222.jpg"/></a></li>
<li><a href=""><img src="image/444.jpg"/></a></li>
<li><a href=""><img src="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 onload="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="image/11.jpg"/></a></li>
<li><a href=""><img src="image/222.jpg"/></a></li>
<li><a href=""><img src="image/444.jpg"/></a></li>
<li><a href=""><img src="image/555.jpg"/></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
</div>
</div>
<!--//向左滚动代码结束-->
</body>
</html></td>
</tr>
</table>
标签：
原文地址：http://www.cnblogs.com/listened/p/4219979.html
