Js图片连续左右滚动的实现代码
发布时间：2015-02-19 编辑：jiaochengji.com
本文分享一例js 图片连续左右滚动的实现代码，实现图片的横向左右滚动，且图片完全可控，效果不错，有需要的朋友参考下。
本节主要内容：
JavaScript实现的可控的图片滚动，横向左右滚动，鼠标放到控制按钮上就可以控制图片的滚动方向。
代码：
复制代码 代码示例:
<html>
<body>
<title>Js图片连续滚动代码--www.jiaochengji.com</title>
<IMG onMouseOver="moveThis('left')" style="CURSOR: pointer" onmouseout=moveout() height=30
src="/jscss/demoimg/200908/6637716.gif" width=8>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 255px; HEIGHT: 78px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TR>
<TD id=demo1>
<TABLE id=demo3 style="MARGIN-LEFT: 0px" cellSpacing=0
cellPadding=0 width=459 border=0>
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
</TABLE>
</TD>
<TD id=demo2></TD></TR></TABLE>
</DIV>
<IMG onMouseOver="moveThis('right')"
style="CURSOR: pointer" onmouseout=moveout() height=30
src="/jscss/demoimg/200908/6637743.gif" width=8>
<SCRIPT language=javascript>
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function MarqueeL(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth;
else
demo.scrollLeft++;
}
function MarqueeR(){
if(demo2.offsetWidth-demo.scrollLeft>=255)
demo.scrollLeft+=demo1.offsetWidth;
else
demo.scrollLeft--;
}
var flag=0;
var MyMar;
//var MyMar=setInterval(MarqueeL,speed);
demo.onmouseover=function() {if(MyMar){clearInterval(MyMar)}}
//demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}
function moveout(way)
{
if(MyMar)
{
clearInterval(MyMar);
}
}
function moveThis(way){
if(way=='right'){
flag=1;
if(MyMar)
{
clearInterval(MyMar);
}
MyMar=setInterval(MarqueeR,speed);
}
else{
flag=0;
if(MyMar)
{
clearInterval(MyMar);
}
MyMar=setInterval(MarqueeL,speed);
}
if(flag) demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}
else demo.onmouseout=function() {MyMar=setInterval(MarqueeL,speed)}
}
</script>
</body>
</html>
<body>
<title>Js图片连续滚动代码--www.jiaochengji.com</title>
<IMG onMouseOver="moveThis('left')" style="CURSOR: pointer" onmouseout=moveout() height=30
src="/jscss/demoimg/200908/6637716.gif" width=8>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 255px; HEIGHT: 78px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TR>
<TD id=demo1>
<TABLE id=demo3 style="MARGIN-LEFT: 0px" cellSpacing=0
cellPadding=0 width=459 border=0>
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
<img src="/jscss/demoimg/wall_s8.jpg" class="floatleft" />
</TABLE>
</TD>
<TD id=demo2></TD></TR></TABLE>
</DIV>
<IMG onMouseOver="moveThis('right')"
style="CURSOR: pointer" onmouseout=moveout() height=30
src="/jscss/demoimg/200908/6637743.gif" width=8>
<SCRIPT language=javascript>
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function MarqueeL(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth;
else
demo.scrollLeft++;
}
function MarqueeR(){
if(demo2.offsetWidth-demo.scrollLeft>=255)
demo.scrollLeft+=demo1.offsetWidth;
else
demo.scrollLeft--;
}
var flag=0;
var MyMar;
//var MyMar=setInterval(MarqueeL,speed);
demo.onmouseover=function() {if(MyMar){clearInterval(MyMar)}}
//demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}
function moveout(way)
{
if(MyMar)
{
clearInterval(MyMar);
}
}
function moveThis(way){
if(way=='right'){
flag=1;
if(MyMar)
{
clearInterval(MyMar);
}
MyMar=setInterval(MarqueeR,speed);
}
else{
flag=0;
if(MyMar)
{
clearInterval(MyMar);
}
MyMar=setInterval(MarqueeL,speed);
}
if(flag) demo.onmouseout=function() {MyMar=setInterval(MarqueeR,speed)}
else demo.onmouseout=function() {MyMar=setInterval(MarqueeL,speed)}
}
</script>
</body>
</html>
您可能感兴趣的文章：
基于jQuery的图片左右无缝滚动插件
js连续向左图片滚动代码
Javascript实现图片上下左右滚动的代码
Js图片连续左右滚动的实现代码
Jquery图片左右滚动的实现代码
Js 图片滚动的实现方法
基于jquery实现点击左右按钮图片横向滚动
jQuery使用数组编写图片无缝向左滚动
jquery实现marquee效果(文字或者图片的水平垂直滚动)
基于jQuery图片平滑连续滚动插件
上一篇：JS图片放大展示的效果代码
下一篇：Js新闻幻灯图片轮播的实现代码
[关闭]