先show一下成品：
首先是网页样式：
#demo
{
background:
#FFF
overflow:hidden
border:
1px
dashed
#CCC
width:
1280px
height:200px
}
#demo
img
{
border:
3px
solid
#F2F2F2
}
#indemo
{
float:
left
width:
800%
}
#demo1
{
float:
left
}
#demo2
{
float:
left
}
布局如下：
<div
id="demo">
<div
id="indemo">
<div
id="demo1">
<a
href="#"><img
src="banner.jpg"
border="0"
/></a>
<a
href="#"><img
src="banner2.jpg"
border="0"
/></a>
</div>
<div
id="demo2"></div>
</div>
</div>
具体的JS实现：
<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>
这里要注意的是：
scrollLeft代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度。
offsetWidth
是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
setInterval()
方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval()
方法会不停地调用函数,直到
clearInterval()
被调用或窗口被关闭。
明白了这个具体的实现就好理解了。
实现的原理是这样的：首先将需要滚动的内容复制一份。当右侧的div显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来，这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧影藏的内容就继续讲父容器想左侧移动，实现隐藏。其中有一点需要注意的是，由于这里是将两张图片同时放入左侧，当右侧显示了一半时会将左侧影藏的完全显示出来，又因为右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。
这样平滑的滚动就实现了。
以上就是本文的全部内容，希望对大家的学习有所帮助。
<div id="demo" style="overflow:hiddenheight:500pxwidth:120pxborder:1px solid #dde5bcoverflow:hiddenfloat:left"><div id=demo1>
<img src="images/js01.gif" width="120" height="120">
<img src="images/js02.gif" width="120" height="120">
<img src="images/js03.gif" width="120" height="120">
<img src="images/js04.gif" width="120" height="120">
<img src="images/js05.gif" width="120" height="120">
<img src="images/js06.gif" width="120" height="120">
<img src="images/js07.gif" width="120" height="120">
<img src="images/js08.gif" width="120" height="120">
<img src="images/js09.gif" width="120" height="120">
</div>
<div id=demo2></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo")
var demo2=document.getElementById("demo2")
var demo1=document.getElementById("demo1")
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.wrap{width:800pxheight:500pxmargin:200px auto 0position: relativeborder:1px solid #000overflow: hidden}
h1{position: absoluteleft:800pxword-break: keep-all}
</style>
<body>
<div class="wrap">
<h1>这是无缝滚动</h1>
<h1>这是无缝滚动</h1>
</div>
<script>
var wenzi=document.querySelectorAll("h1")
var speed1=0
var speed2=0
var flag=false
setInterval(function(){
speed1-=10
wenzi[0].style.left=800+speed1+"px"
wenzi[1].style.left=800+speed2+"px"
if(wenzi[0].offsetLeft==0){
flag=true
}
if(flag){
speed2-=10
}
if(wenzi[0].offsetLeft==0){
speed2=0
}
if(wenzi[1].offsetLeft==0){
speed1=0
}
},60)
</script>
</body>
</html>
纯手敲 觉得有用可以点个赞啊
