javascript实现图片无缝滚动（scrollLeft的使用方法介绍）
2014-08-11 10:10
786 查看
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.piczhanshi{width:976px;height:167px;border:1px #999999 solid;margin:0 auto;}
h3{
float:left;
background-color: #DDD;
float: left;
height: 35px;
width: 966px;
margin-top: 2px;
line-height: 35px;
text-align: center;
color: #064278;
font-size: 18px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.tupian{
float:left;
width:966px;
height:120px;
margin-left:5px;margin-right:5px;
}
.demo{width:966px;height:110px;overflow:hidden;margin-top:5px;margin-bottom:5px;} //这个是scrollLeft作用的层，实现移动效果的是他的子级divindexmo
#indemo{width:800%;height:110px;} //这里的宽度为他的父级div层的8倍宽
.demo1,.demo2{float:left;}
</style>
</head>
<body>
<div id="piczhanshi" class="piczhanshi">
<h3>鸟巢效果图</h3>
<div id="tupian" class="tupian">//这里是包括图片的最外层div是为了定位而设置的与滚动没关系
<div id="demo" class="demo"> // 这里是包括图片的div，也就是须要实现子级div滚动的层（scrollLeft是相对于当前层的子层的），这里必须这是好宽高已经overflow：hidden
<div id="indemo"> //这个是须要滚动的图片包括层，他的宽度在图片左右滚动效果下，比他的父级div的宽大，这里设置为800%，也就是相当他的父级div来说，他等于父级div宽的8倍
<div id="demo1" class="demo1">//这里是包括图片的层，通过“float”和demo2实现无缝连接
<img src="image/niaochao1.jpg" />
<img src="image/niaochao2.jpg" />
<img src="image/niaochao3.jpg" />
<img src="image/niaochao4.jpg" />
<img src="image/niaochao5.jpg" />
<img src="image/niaochao6.jpg" />
<img src="image/niaochao7.jpg" />
<img src="image/niaochao8.jpg" />
<img src="image/niaochao9.jpg" />
</div>
<div id="demo2" class="demo2"></div>//这里通过js代码“ tab2.innerHTML=tab1.innerHTML;”得到demo1的值，通过“float”和demo1实现无缝连接
</div>
</div>
</div>
</div>
<script language="javascript">
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //通过赋值获得tab1的值
function marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//当tab的移动宽度大于等于demo1的时候，scrollLeft为0，也就是恢复到未移动前的情况，继续移动
{tab.scrollLeft=0}
else
{tab.scrollLeft++;} //图片层不断的往left移动
}
var timer=setInterval(marquee,speed); //定时器
tab.onmouseover=function(){clearInterval(timer)};//鼠标经过容器的时候清除定时器
tab.onmouseout=function(){timer=setInterval(marquee,speed);}//鼠标移开容器的时候開始定时器
</script>
</body>
</html>
*******************2004-04-26，优化后，点击左右的图片就清除自己主动滚动的定时器，实现点击的时候能够滚动对应的像素************************
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.main{width:980px;height:190px;border:1px #999999 solid;margin:0 auto;}
h3{width:980px;height:30px;text-align:center;color:#3399FF;float:left;}
.tupian{width:980px;height:139px;float:left;position:relative;}
.indemo{width:800%;height:139px;}
.demo{width:948px;height:160px;float:left;overflow:hidden;}
.demo1{float:left;}
.demo2{float:left;}
.right{height:89px;width:16px;left:0;margin-top:40px;float:left;}
.left{height:89px;width:16px;margin-top:40px;float:left;}
</style>
</head>
<body>
<div id="main" class="main">
<h3>鸟巢展示图</h3>
<div id="tupian" class="tupian">
<div class="left"><img src="images/but_l2.jpg" class="lt" id="lt" /></div>
<div id="demo" class="demo">
<div id="indemo" class="indemo">
<div id="demo1" class="demo1">
<img src="images/niaochao1.jpg" />
<img src="images/niaochao2.jpg" />
<img src="images/niaochao3.jpg" />
<img src="images/niaochao4.jpg" />
<img src="images/niaochao5.jpg" />
<img src="images/niaochao6.jpg" />
<img src="images/niaochao7.jpg" />
<img src="images/niaochao8.jpg" />
<img src="images/niaochao9.jpg" />
</div>
<div id="demo2" class="demo2"></div>
</div>
</div>
<div class="right"><img src="images/but_r2.jpg" class="rt" id="rt" /></div>
</div>
</div>
<script type="text/javascript">
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
var lt=document.getElementById("lt");
var rt=document.getElementById("rt");
tab2.innerHTML=tab1.innerHTML;
function marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
{tab.scrollLeft=0}
else
{tab.scrollLeft++;}
}
var timer=setInterval(marquee,speed);
tab.onmouseover=function(){clearInterval(timer)};
tab.onmouseout=function(){timer=setInterval(marquee,speed)}
rt.onmouseout=function(){timer=setInterval(marquee,speed)};
//由于设置了点击图标的的时候清除定时器，所以这里必须在移开鼠标的时候開始定时器
lt.onmouseout=function(){timer=setInterval(marquee,speed)};
lt.onclick=function(){ //点击左图标时候执行
clearInterval(timer); //清除定时器
if(tab.scrollLeft>=1440){tab.scrollLeft=0;} //当层往左移动的像素大于1440的时候，scrillLeft返回0
else{tab.scrollLeft+=160} //不断的往左滚
}
rt.onclick=function(){ //点击右边鼠标的时候
clearInterval(timer);//清除定时器
if(tab.scrollLeft==0){tab.scrollLeft=1440;} //scroll为0的时候（这里必须注意，if里面是用“==”，是对照的意思，{}里面的“=”是赋值的意思，不能弄混），scrollLeft返回0
else if(tab.scrollLeft<=-1440){tab.scrollLeft=0;}//当scrollLeft少于1440的时候，scrollLeft返回0，同一时候）if（）{} else{}之间是不存在不论什么标记符号的，这是格式
else{tab.scrollLeft-=160;}
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.piczhanshi{width:976px;height:167px;border:1px #999999 solid;margin:0 auto;}
h3{
float:left;
background-color: #DDD;
float: left;
height: 35px;
width: 966px;
margin-top: 2px;
line-height: 35px;
text-align: center;
color: #064278;
font-size: 18px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.tupian{
float:left;
width:966px;
height:120px;
margin-left:5px;margin-right:5px;
}
.demo{width:966px;height:110px;overflow:hidden;margin-top:5px;margin-bottom:5px;} //这个是scrollLeft作用的层，实现移动效果的是他的子级divindexmo
#indemo{width:800%;height:110px;} //这里的宽度为他的父级div层的8倍宽
.demo1,.demo2{float:left;}
</style>
</head>
<body>
<div id="piczhanshi" class="piczhanshi">
<h3>鸟巢效果图</h3>
<div id="tupian" class="tupian">//这里是包括图片的最外层div是为了定位而设置的与滚动没关系
<div id="demo" class="demo"> // 这里是包括图片的div，也就是须要实现子级div滚动的层（scrollLeft是相对于当前层的子层的），这里必须这是好宽高已经overflow：hidden
<div id="indemo"> //这个是须要滚动的图片包括层，他的宽度在图片左右滚动效果下，比他的父级div的宽大，这里设置为800%，也就是相当他的父级div来说，他等于父级div宽的8倍
<div id="demo1" class="demo1">//这里是包括图片的层，通过“float”和demo2实现无缝连接
<img src="image/niaochao1.jpg" />
<img src="image/niaochao2.jpg" />
<img src="image/niaochao3.jpg" />
<img src="image/niaochao4.jpg" />
<img src="image/niaochao5.jpg" />
<img src="image/niaochao6.jpg" />
<img src="image/niaochao7.jpg" />
<img src="image/niaochao8.jpg" />
<img src="image/niaochao9.jpg" />
</div>
<div id="demo2" class="demo2"></div>//这里通过js代码“ tab2.innerHTML=tab1.innerHTML;”得到demo1的值，通过“float”和demo1实现无缝连接
</div>
</div>
</div>
</div>
<script language="javascript">
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //通过赋值获得tab1的值
function marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//当tab的移动宽度大于等于demo1的时候，scrollLeft为0，也就是恢复到未移动前的情况，继续移动
{tab.scrollLeft=0}
else
{tab.scrollLeft++;} //图片层不断的往left移动
}
var timer=setInterval(marquee,speed); //定时器
tab.onmouseover=function(){clearInterval(timer)};//鼠标经过容器的时候清除定时器
tab.onmouseout=function(){timer=setInterval(marquee,speed);}//鼠标移开容器的时候開始定时器
</script>
</body>
</html>
*******************2004-04-26，优化后，点击左右的图片就清除自己主动滚动的定时器，实现点击的时候能够滚动对应的像素************************
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.main{width:980px;height:190px;border:1px #999999 solid;margin:0 auto;}
h3{width:980px;height:30px;text-align:center;color:#3399FF;float:left;}
.tupian{width:980px;height:139px;float:left;position:relative;}
.indemo{width:800%;height:139px;}
.demo{width:948px;height:160px;float:left;overflow:hidden;}
.demo1{float:left;}
.demo2{float:left;}
.right{height:89px;width:16px;left:0;margin-top:40px;float:left;}
.left{height:89px;width:16px;margin-top:40px;float:left;}
</style>
</head>
<body>
<div id="main" class="main">
<h3>鸟巢展示图</h3>
<div id="tupian" class="tupian">
<div class="left"><img src="images/but_l2.jpg" class="lt" id="lt" /></div>
<div id="demo" class="demo">
<div id="indemo" class="indemo">
<div id="demo1" class="demo1">
<img src="images/niaochao1.jpg" />
<img src="images/niaochao2.jpg" />
<img src="images/niaochao3.jpg" />
<img src="images/niaochao4.jpg" />
<img src="images/niaochao5.jpg" />
<img src="images/niaochao6.jpg" />
<img src="images/niaochao7.jpg" />
<img src="images/niaochao8.jpg" />
<img src="images/niaochao9.jpg" />
</div>
<div id="demo2" class="demo2"></div>
</div>
</div>
<div class="right"><img src="images/but_r2.jpg" class="rt" id="rt" /></div>
</div>
</div>
<script type="text/javascript">
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
var lt=document.getElementById("lt");
var rt=document.getElementById("rt");
tab2.innerHTML=tab1.innerHTML;
function marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
{tab.scrollLeft=0}
else
{tab.scrollLeft++;}
}
var timer=setInterval(marquee,speed);
tab.onmouseover=function(){clearInterval(timer)};
tab.onmouseout=function(){timer=setInterval(marquee,speed)}
rt.onmouseout=function(){timer=setInterval(marquee,speed)};
//由于设置了点击图标的的时候清除定时器，所以这里必须在移开鼠标的时候開始定时器
lt.onmouseout=function(){timer=setInterval(marquee,speed)};
lt.onclick=function(){ //点击左图标时候执行
clearInterval(timer); //清除定时器
if(tab.scrollLeft>=1440){tab.scrollLeft=0;} //当层往左移动的像素大于1440的时候，scrillLeft返回0
else{tab.scrollLeft+=160} //不断的往左滚
}
rt.onclick=function(){ //点击右边鼠标的时候
clearInterval(timer);//清除定时器
if(tab.scrollLeft==0){tab.scrollLeft=1440;} //scroll为0的时候（这里必须注意，if里面是用“==”，是对照的意思，{}里面的“=”是赋值的意思，不能弄混），scrollLeft返回0
else if(tab.scrollLeft<=-1440){tab.scrollLeft=0;}//当scrollLeft少于1440的时候，scrollLeft返回0，同一时候）if（）{} else{}之间是不存在不论什么标记符号的，这是格式
else{tab.scrollLeft-=160;}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript实现图片无缝滚动（scrollLeft的用法介绍）
- 使用Javascript简单实现图片无缝滚动
- JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。
- html使用javascript实现图片滚动无缝拼接
- 使用Javascript简单实现图片无缝滚动
- Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)
- 无缝滚动实现方式二：用父盒子的scrollLeft 实现
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
- Javascript实现图片无缝滚动
- 原生javascript实现图片无缝滚动效果
- javascript+html5实现仿flash滚动播放图片的方法
- javascript实现多张图片左右无缝滚动效果
- 利用javascript的setInterval()函数实现的图片无缝滚动
- JavaScript实现一个最基本的图片无缝横向滚动效果
- 使用JavaScript实现连续滚动字幕效果的方法
- 原生JS实现图片无缝滚动方法(附带封装的运动框架)
- 使用JavaScript实现连续滚动字幕效果的方法
- Javascript实现 图片的无缝滚动
- javascript实现图片无缝滚动
- 使用CSS实现图片分割效果的简单方法介绍