<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style>
* { margin:0; padding:0; }
img { border:none; }
ul { list-style:none; }
#roll { width:640px; height:148px; margin:50px auto; position:relative; overflow:hidden; border:1px solid #ccc; }
#roll ul { position:absolute; left:0; }
#roll ul li { float:left; }
#roll ul li a { display:block; padding:10px; }
#roll ul li a:hover { padding-top:5px; }
#left,#right { width:30px; height:40px; line-height:40px; text-align:center; color:#eee; text-decoration:none; background:#444; display:block; position:absolute; top:30%; }
#right { right:0; }
#left:hover,#right:hover { background:#000; color:#fff; }
</style>
</head>
<body>
<div id="roll">
<ul>
<li><a href="#"><img src="images/png-0001.png" alt=""></a></li>
<li><a href="#"><img src="images/png-0002.png" alt=""></a></li>
<li><a href="#"><img src="images/png-0003.png" alt=""></a></li>
<li><a href="#"><img src="images/png-0004.png" alt=""></a></li>
<li><a href="#"><img src="images/png-0005.png" alt=""></a></li>
<li><a href="#"><img src="images/png-0006.png" alt=""></a></li>
</ul>
<a href="###" id="left"><</a>
<a href="###" id="right">></a>
</div>
<script>
window.onload = function()
{
var roll = document.getElementById("roll");
var ul = roll.getElementsByTagName("ul")[0];
var li = roll.getElementsByTagName("li");
var left = document.getElementById("left");
var right = document.getElementById("right");
var speed = -5;
var timer = null;
ul.innerHTML += ul.innerHTML;
ul.style.width = li[0].offsetWidth * li.length + "px";
function marquee()
{
ul.style.left = ul.offsetLeft + speed + "px";
if(ul.offsetLeft < -ul.offsetWidth/2)
{
ul.style.left = "0px";
}
else if(ul.offsetLeft > 0)
{
ul.style.left = -ul.offsetWidth/2 + "px";
}
}
left.onclick = function() { speed = -5; };
right.onclick = function() { speed = 5; };
timer = setInterval(marquee,30);
ul.onmouseover = function() { clearInterval(timer); };
ul.onmouseout = function() { timer = setInterval(marquee,30); };
}
</script>
</body>
</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>无标题文档</title>
</head>
<body>
<style>
.scroll_div {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:60px;border: 0;margin: auto 8px; 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 ScrollImgLeft(){
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>
<h2 align="center">向左滚动</h2>
<div style="text-align:center">
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->
</body></html>
浙公网安备 33010602011771号