javascript/js各种方向图片无限无缝滚动
javascript/js图片向上无限无缝滚动
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="demo1">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
</div>
<div id=demo2></div>
</div>
<script>
var speed=50;//控制滚动的速度快慢
demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)//当demo1与demo2的交界处滚动至demo顶端时
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;//demo向上滚动一个像素
}
}
var MyMar=setInterval(Marquee,speed);//设置定时器
demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</script>
<p><a href="#" target="_blank">月影web</a></p>
javascript/js图片向下无限无缝滚动
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="demo1">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
</div>
<div id=demo2></div>
</div>
<script>
var speed=50;//控制滚动的速度快慢
demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
demo.scrollTop=demo.scrollHeight;
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight;
else{
demo.scrollTop--;
}
}
var MyMar=setInterval(Marquee,speed);//设置定时器
demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</script>
<p><a href="#" target="_blank">月影web</a></p>
javascript/js图片向左无限无缝滚动
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="indemo" style="float:left;width:1400%">
<div id="demo1" style="float:left">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
</div>
</div>
<div id="demo2" style="float:left"></div>
</div>
<script>
var speed=50;//控制滚动的速度快慢
demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth;
else{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);//设置定时器
demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</script>
<p><a href="#" target="_blank">月影web</a></p>
javascript/js图片向右无限无缝滚动
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="indemo" style="float:left;width:1400%">
<div id="demo1" style="float:right">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
<img src="yue.jpg">
</div>
<div id="demo2" style="float:right"></div>
</div>
</div>
<script>
var speed=50;//控制滚动的速度快慢
demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
demo.scrollLeft=demo.scrollWidth;
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth;
else{
demo.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);//设置定时器
demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</script>
<p><a href="#" target="_blank">月影web</a></p>
