javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

<!DOCTYPE html >

<html>

<head>

<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>

<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实现无缝连接

</div>

<div id="demo2" class="demo2"></div>//这里通过js代码“ tab2.innerHTML=tab1.innerHTML;”得到demo1的值，通过“float”和demo1实现无缝连接

</div>

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>

<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>

<h3>鸟巢展示图</h3>

</div>

</div>

</div>

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的使用方法介绍）

时间： 2024-10-10 13:02:09

javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

javascript实现图片无缝滚动（scrollLeft的使用方法介绍）的相关文章

javascript实现图片无缝滚动-------Day 27

JavaScript学习笔记5 之计时器 & scroll、offset、client系列属性 & 图片无缝滚动

jquery图片无缝滚动特效

jquery图片无缝滚动代码左右上下无缝滚动图片

第41天：匀速、缓动运动和图片无缝滚动

原生javascript效果：无缝滚动

js多组图片无缝滚动

Javascript图片无缝滚动

JavaScript----marquee滚动标签图片无缝滚动插入百度地图