前两次弄‘图片横向滚动‘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 >
<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>
时间： 2024-12-09 12:58:32