替代<marquee>的循环滚动

【总结】
　
 
 
 
　　由于一般不适用<marquee>了，所以出现了很多替代脚本，或iframe或JS输出<marquee>，不管怎么做，都略显麻烦。
　　下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，下设indemo，再里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
下面是两个实例代码（上翻、左翻）
向上滚动：
 

<!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>
<style type="text/css">
<!--
body{
margin:0 auto;
}
#demo {
background: green;
overflow:hidden;
/*border: 1px dashed #CCC;*/
width: 150px;
height:400px;
}
#demo img {
border: 3px solid black;
float:left;
}
#indemo {
/*float: center;*/
/*width: 800%;*/
height:800%;
width:130px;
text-align:center;
margin:0 auto;


}


#demo1 {
float: left;
}

#demo2 {
float: left;
}


-->
</style>
<script type="text/javascript">
function change1()
{
document.getElementById("i").src = "www.baidu.com";
}
function change2()
{
document.getElementById("i").src = "tupiangundong/2.jgp";
}
function change3()
{
document.getElementById("i").src = "http://www.codefans.net/jscss/demoimg/wall_s3.jpg";
}
function change4()
{
document.getElementById("i").src = "http://codefans.net/jscss/demoimg/wall_s4.jpg";
}
function change5()
{
document.getElementById("i").src = "http://codefans.net/jscss/demoimg/wall_s5.jpg";
}
function change6()
{
document.getElementById("i").src = "http://codefans.net/jscss/demoimg/wall_s6.jpg";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<div id="demo" align="center">
<div id="indemo">
<div id="demo1" align="center">
<a href="http://www.baidu.com"><img src="tupiangundong/1.jpg" border="0" onclick="change1();" /></a>
<a href="#"><img src="tupiangundong/2.jpg" border="0" onclick="change2();"/></a>
<a href="#"><img src="tupiangundong/3.jpg" border="0" onclick="change3();"/></a>
<a href="#"><img src="tupiangundong/4.jpg" border="0" onclick="change4();"/></a>
<a href="#"><img src="tupiangundong/5.jpg" border="0" onclick="change5();"/></a>
<a href="#"><img src="tupiangundong/6.jpg" border="0" onclick="change6();"/></a>
<a href="#"><img src="tupiangundong/7.jpg" border="0" onclick="change7();"/></a>
<a href="#"><img src="tupiangundong/8.jpg" border="0" onclick="change8();"/></a>
<a href="#"><img src="tupiangundong/9.jpg" border="0" onclick="change9();"/></a>

</div>
<div id="demo2" align="center"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
/*if(tab2.offsetTop-tab.scrollTop<=0)*/
if(tab2.offsetHeight-tab.scrollTop<=0)
  tab.scrollTop-=tab1.offsetHeight;
else{
  tab.scrollTop++;
      }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

</td>
</tr>

</table>

</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>
<style type="text/css">
<!--
body{
margin:0 auto;
}
#demo {
background: green;
overflow:hidden;
/*border: 1px dashed #CCC;*/
width: 800px;
}
#demo img {
border: 3px solid red;
}
#indemo {
/*float: center;*/
width: 800%;
}


#demo1 {
float: left;
}

#demo2 {
float: left;
}


-->
</style>
<script type="text/javascript">
function change1()
{
document.getElementById("i").src = "www.baidu.com";
}
function change2()
{
document.getElementById("i").src = "tupiangundong/2.jgp";
}
function change3()
{
document.getElementById("i").src = "http://www.codefans.net/jscss/demoimg/wall_s3.jpg";
}
function change4()
{
document.getElementById("i").src = "http://codefans.net/jscss/demoimg/wall_s4.jpg";
}
function change5()
{
document.getElementById("i").src = "http://codefans.net/jscss/demoimg/wall_s5.jpg";
}
function change6()
{
document.getElementById("i").src = "http://codefans.net/jscss/demoimg/wall_s6.jpg";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<div id="demo" align="center">
<div id="indemo">
<div id="demo1" align="center">
<a href="http://www.baidu.com"><img src="tupiangundong/1.jpg" border="0" onclick="change1();" /></a>
<a href="#"><img src="tupiangundong/2.jpg" border="0" onclick="change2();"/></a>
<a href="#"><img src="tupiangundong/3.jpg" border="0" onclick="change3();"/></a>
<a href="#"><img src="tupiangundong/4.jpg" border="0" onclick="change4();"/></a>
<a href="#"><img src="tupiangundong/5.jpg" border="0" onclick="change5();"/></a>
<a href="#"><img src="tupiangundong/6.jpg" border="0" onclick="change6();"/></a>
<a href="#"><img src="tupiangundong/7.jpg" border="0" onclick="change7();"/></a>
<a href="#"><img src="tupiangundong/8.jpg" border="0" onclick="change8();"/></a>
<a href="#"><img src="tupiangundong/9.jpg" border="0" onclick="change9();"/></a>

</div>
<div id="demo2" align="center"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth;
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</td>
</tr>

</table>

</body>
</html>

 
 
 
 
 
 
 
posted @ 2014-03-15 10:42  vikening  阅读(459)  评论(0)    收藏  举报