1 从左向右无缝滚动
1.1 编写HTML文件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div class="mytxt" id="mytxt">
<div class="box">
<div id="box1">
<ul>
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
</ul>
</div>
<div id="box2"></div>
</div>
</div>
</body>
</html>
1.2 编写CSS样式
.mytxt{
width: 1280px;
height: 170px;
line-height: 30px;
border: 1px solid red;
margin:0px auto;
margin-top:200px;
overflow: hidden;
}
ul{padding: 0;margin: 0}
ul li{float: left;margin: 10px;list-style: none;}
.mytxt img{width: 300px;height: 150px;}
.box{width: 300%;float: left;}
#box1,#box2{float: left;}
#box2{color: red;}
1.3 编定JS脚本
var mytxt=document.getElementById('mytxt');
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
box2.innerHTML=box1.innerHTML;
mytxt.scrollLeft=mytxt.offsetWidth;
function moveLeft(){
if(mytxt.scrollLeft>0){
mytxt.scrollLeft-=1;
}else{
mytxt.scrollLeft+=mytxt.offsetWidth;
}
var timer=setTimeout("moveLeft()",10);
mytxt.onmouseover=function(){
clearTimeout(timer);
}
mytxt.onmouseout=function(){
timer=setTimeout("moveLeft()",10);
}
}
moveLeft();
2 从右向左无缝滚动
2.1 编写HTML文件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="myscroll" class="scroll">
<div id="inscroll" class="inscroll">
<div id="con1">
<ul>
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
</ul>
</div>
<div id="con2"></div>
</div>
</div>
</body>
</html>
2.2 编写CSS文件
.scroll{
width: 1380px;
height: 160px;
line-height: 30px;
border:2px solid #ccc;
overflow: hidden;
margin: 0 auto;
padding: 0px 5px;
text-align: center;
}
.scroll img{width: 200px;height: 150px;}
ul{margin: 0;padding: 0;}
ul li{
list-style: none;
margin: 5px 10px;
float: left;
}
.inscroll{
width: 800%;
float: left;
}
.inscroll #con1,.inscroll #con2{
float: left;
text-align: center;
}
2.3 编写JS脚本
var myscroll=document.getElementById('myscroll');
var con1=document.getElementById("con1");
var con2=document.getElementById("con2");
var speed=20;
con2.innerHTML=con1.innerHTML;
myscroll.scrollLeft=0;
function scrollLeft(){
if(myscroll.scrollLeft<=myscroll.offsetWidth){
myscroll.scrollLeft++;
}else{
myscroll.scrollLeft-=con2.offsetWidth;
}
}
var timer=setInterval("scrollLeft()",speed);
myscroll.onmouseover=function(){
clearInterval(timer)
}
myscroll.onmouseout=function(){
timer=setInterval("scrollLeft()",speed);
}
