左右滚动的图⽚代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<img src="images/butt_arrowl.gif" οnmοuseοver="clearright();toleft()"/> <img src="images/butt_arrowr.gif" οnmοuseοver="clearleft();toright()"/> <div>
<div id="demo" >
<table cellpadding="0" align="left" border="0" cellspace="0">
<tbody>
<tr>
<td id="demo1" valign="top">
<table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tbody>
<tr align="center">
<td width="50" height="50">
<img height="50" src="images/photo_small01.jpg" />
</td>
<td width="50" height="50">
<img height="50" src="images/photo_small02.jpg" />
</td>
<td width="50" height="50">
<img height="50" src="images/photo_small03.jpg" />
</td>
<td width="50" height="50">
<img height="50" src="images/photo_small06.jpg" />
</td>
<td width="50" height="50">
<img height="50" src="images/photo_small05.jpg" />
</td>
</tr>
</tbody>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div id="demo_a" >
<table cellpadding="0" align="left" border="0" cellspace="0">
<tbody>
<tr>
<td id="demo_b" valign="top">
<table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tbody>
<tr align="center">
<td width="50" height="50">
<img height="50" src="images/photo_small04.jpg" />
</td>
<td width="50" height="50">
<img height="50" src="images/photo_small07.jpg" />
</td>
<td width="50" height="50">
<img height="50" src="images/photo_small08.jpg" />
<td width="50" height="50">
<img height="50" src="images/photo_small09.gif" />
</td>
<td width="50" height="50">
<img height="50" src="images/photo_small01.jpg" />
</td>
</tr>
</tbody>
</table>
</td>
<td id="demo_c" valign="top"></td>
</tr>
</tbody>
</table>
</div>
</div>
</html>
<script type="text/javascript">
/*
**兼容IE,Firefox 遵循W3C标准写法的图⽚⽆缝滚动代码（⽀持左移/右移功能）(本⽰例为上下两⾏图⽚进⾏双⾏滚动)
**
**实现思路：⼀个设定宽度并且隐藏超出它宽度的内容的容器demo，⾥⾯放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的⽬的，当滚动⾄demo1与demo2的交界处时直接跳回初始位置，
**因为demo1与demo2⼀样，所以分不出跳动的瞬间，从⽽达到“⽆缝”滚动的⽬的。
*/
var speed1=0 //图⽚左移的速度
var MyMar1 //setInterverval⽅法返回的间隔ID，些ID为全局的调⽤次数(⽤于第⼀⾏图⽚)
var MyMar2 //setInterverval⽅法返回的间隔ID，些ID为全局的调⽤次数(⽤于第⼆⾏图⽚)
var lefthit=0 //记录左移按钮点击次数
var righthit=0 记录右移按钮点击次数
//调⽤右移⽅法前，先让左移停⽌（clearInterval清除setInterval对⽅法的调⽤）
function clearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
}
//图⽚左移的⽅法
function toleft(){
//判断是否是第⼀次按下左移按钮（图⽚往左开始移动的时候，不会在调⽤此⽅法。只有当按了右移按钮时，才会把lefthit重设为0） if(lefthit==0){
speed1=30;//图⽚左移速度时间毫秒
//让的内容demo2与demo1内容⼀样
//上⾏图⽚移动的⽅法
function Marquee1(){
//当demo滚动⾄demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
ElementById("demo2").ElementById("demo").scrollLeft<=0){
//demo跳回初始位置
}
else{
//demo开始重新移动
}
}
//setInterval让Marquee1⽅法每隔多少秒执⾏⼀次，并把返回的调⽤次数ID
MyMar1=setInterval(Marquee1,speed1)
//当⿏标移动demo上⾯时。调⽤clearInterval清除MyMar1.这样图⽚便不会在移动了。移到图⽚时，第⼀⾏和第⼆⾏的图⽚都会停⽌
{clearInterval(MyMar1);clearInterval(MyMar2)}
//当⿏标移除demo时，重新setInterval让⽅法执⾏，这样图⽚会继续移动
{MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
//下⾯的⽅法与上⾯的⽅法⼀样，⽤于第⼆⾏的图⽚向左移动
function Marquee2(){
ElementById("demo_c").ElementById("demo_a").scrollLeft<=0){
else{
}
}
MyMar2=setInterval(Marquee2,speed1)
{clearInterval(MyMar2);clearInterval(MyMar1)}
{MyMar2=setInterval(Marquee2,speed1); ElementById("demo").onmouseout()}
lefthit=1 //设置左移按钮，当按了⼀次左移后(不管按多少次)，在没按右移按钮之前，toleft⽅法⾥的的代码不会再被执⾏
righthit=0 //把右移按钮设为0，这样当下次点了右移按钮的时候，以便toright⽅法被调⽤
}
}
var MyMar3 //setInterverval⽅法返回的间隔ID，些ID为全局的调⽤次数(⽤于第⼀⾏图⽚)
var MyMar4 //setInterverval⽅法返回的间隔ID，些ID为全局的调⽤次数(⽤于第⼆⾏图⽚)
var speed2=0 //图⽚右移的速度
//调⽤移左⽅法前，先让右移停⽌（clearInterval清除setInterval对⽅法的调⽤）
function clearright(){
clearInterval(MyMar3)
clearInterval(MyMar4)
}
/
/图⽚右移⽅法(与图⽚左移⽅法思路⼀样)
function toright(){
//判断是否是第⼀次按下右移按钮（图⽚往右开始移动的时候，不会在调⽤此⽅法。只有当按了左移按钮时，才会把righthit重设为0）
if(righthit==0){
speed2=30;
function Marquee_a(){
ElementById("demo").scrollLeft<=0){
}
else{
}
}
MyMar3=setInterval(Marquee_a,speed2)
{clearInterval(MyMar3);ElementById("demo_a").onmouseover()}
{MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
function Marquee_b(){
ElementById("demo_a").scrollLeft<=0){
}
else{
}
}
MyMar4=setInterval(Marquee_b,speed2)
{clearInterval(MyMar4);clearInterval(MyMar3)}
{MyMar4=setInterval(Marquee_b,speed2);ElementById("demo").onmouseout()}
righthit=1 //设置右移按钮，当按了⼀次右移按钮后(不管按多少次)，在没按左移按钮之前，toright⽅法⾥的的代码不会再被执⾏
lefthit=0 //把左移按钮设为0，这样当下次点了左移按钮的时候，以便toleft⽅法被调⽤
}
}
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论