js无缝滚动

shiyi030208 2013-09-10 04:12:31

js无缝向左滚动.有调试过的。源码哦。

...全文

171 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

csdn_aspnet 2013-09-14

打赏
举报

示例1：

<!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=utf-8" />
<title>实现图片无缝滚动</title>
<style type="text/css">
body {
	margin:0 auto;
	padding-top:20px;
}
#photo {
	width:440px;
	height:100px;
	border:#CCC dashed 1px;
	padding:5px;
	margin:0 auto;
	overflow: hidden;
	white-space:nowrap;
	text-align:center;
}
ul {
	white-space:nowrap;
	margin:0;
	padding:0;
	text-align:left;
	display:inline;
}
#photo ul li {
	list-style:none;
	margin-right:1px;
	display:inline;
}
#photo ul li img {
	width:100px;
	height:100px;
	border:1px #efefef solid;
}
#demo1, #demo2, #demo1 ul, #demo1 ul li, #demo2 ul, #demo2 ul li {
	white-space:nowrap;
	display: inline;
}
</style>
<script language="javascript">
window.onload=function(){
	var photo=document.getElementById('photo'),
		demo1=document.getElementById('demo1'),
		demo2=document.getElementById('demo2');
		demo2.innerHTML=demo1.innerHTML;
		function mar(){
			if(demo2.offsetWidth-photo.scrollLeft<=0)
			photo.scrollLeft=0;
			else photo.scrollLeft++
			}
		var mymar=setInterval(mar,20);
		photo.onmousemove=function(){
			clearInterval(mymar);
			}
		photo.onmouseout=function(){
			mymar=setInterval(mar,20);
			}
	}
</script>
</head>
<body>
<div id="photo">
  <div id="demo1">
    <ul>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/2 (1).jpg" /></li>
      <li><img src="images/2 (2).jpg" /></li>
      <li><img src="images/2 (3).jpg" /></li>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/2 (1).jpg" /></li>
      <li><img src="images/2 (2).jpg" /></li>
      <li><img src="images/2 (3).jpg" /></li>
    </ul>
  </div>
  <div id="demo2"></div>
</div>
</body>
</html>

示例2：

兼容多浏览器firfox、IE、oprea的JS无缝滚动代码
符合W3C的代替marquee的js无缝滚动代码，兼容多浏览器（firfox、IE、oprea），推荐使用！
注意：
在外层div中css一定要设置 overflow:hidden;在该例子里，向上是id为goup，向左是goleft;
在向左滚动时 goleft的宽一定要小于goleft1，否则滚动不了，这是因为默认情况下是因为div在默认情况只能判断height,而不能判断width,而table却恰恰相反。
<!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>兼容多浏览器(firfox、IE、oprea)的js连续滚动代码_酷站代码</title>
<style type="text/css">
<!--
body {
background-color: #000000;
color: #FFFFFF;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#goup {
overflow:hidden;
width: 200px;
height: 270px;
}
#goup1,#goup2 {
text-align: center;
height: 271px;
width: 200px;
}
#goup1 li,#goup2 li {
list-style-type: none;
float: left;
text-align: center;
width: 90px;
height: 45px;
}
#goleft {
overflow:hidden;
height:57px;
width: 396px;
}
#goleft1{
width: 924px;
}
#goleft1 li {
float: left;
}
-->
</style>
</head>
<body>
向上滚动：
<div id="goup"><div id="goup1">
<ul>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
</ul>
</div><div id="goup2"></div></div>
<script type="text/javascript">
var speed=20;
var FGgoup=document.getElementById('goup');
var FGgoup1=document.getElementById('goup1');
var FGgoup2=document.getElementById('goup2');
FGgoup2.innerHTML=FGgoup1.innerHTML
function Marquee1(){
if(FGgoup2.offsetHeight-FGgoup.scrollTop<=0)
FGgoup.scrollTop-=FGgoup1.offsetHeight
else{
FGgoup.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
FGgoup.onmouseover=function() {clearInterval(MyMar1)}
FGgoup.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
向左滚动：
<div id="goleft">
<div id="goleft1">
<ul>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
<li><a href="http://www.5icool.org"><img src="http://www.5icool.org/uploadfile/2010/0611/20100611111838824.png" alt="酷站代码" /></a></li>
</ul>
</div>
<div id="goleft2"> </div></div>
<script type="text/javascript">
var speed2=10;
var FGgoleft=document.getElementById('goleft');
var FGgoleft1=document.getElementById('goleft1');
var FGgoleft2=document.getElementById('goleft2');
FGgoleft2.innerHTML=FGgoleft1.innerHTML
function Marquee2(){
if(FGgoleft2.offsetWidth-FGgoleft.scrollLeft<=0)
FGgoleft.scrollLeft-=FGgoleft1.offsetWidth
else{
FGgoleft.scrollLeft++
}
}
var MyMar2=setInterval(Marquee2,speed2)
FGgoleft.onmouseover=function() {clearInterval(MyMar2)}
FGgoleft.onmouseout=function() {MyMar2=setInterval(Marquee2,speed2)}
</script>
</body>
</html>