实现一组图片循环且首尾相连的滚动效果
Posted bzluohai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现一组图片循环且首尾相连的滚动效果相关的知识，希望对你有一定的参考价值。
设计思想：在一个Div内存放两个相同内容（使用一行多列表格）作为一个滚动对象，并将超出的宽度的内容隐藏，在JS脚本中定义Div向移动的方法（水平坐标加1）。当第一个内容完全消失（即Div向左移动的距离达到该Div的宽度，此时第二个内容完全显示)时，将滚动条的坐标复位，开始新的一轮。
代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>一组图片循环且首尾相连的滚动效果</title> <style> #bg{ width:940px;height:300px; background：url(images/精品展示.jpg); } #sm{/*滚动对象样式*/ overflow:hidden;/*隐藏Div中多余的内容，增加图片会一起滚动*/ width:920px;height:280px; margin:0 auto; padding-top:30px; } </style> </head> <body> <center> <div id="bg"> <div id="sm"> <!--滚动div--> <table> <!--外表格1x2,且第2单元格是空的--> <tr> <td id="Pic1"> <table> <!--内表格1x9,存放9张图片--> <tr> <td><img src="images/1.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/2.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/3.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/4.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/5.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/6.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/7.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/8.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> <td><img src="images/9.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td> </tr> </table> </td> <td id="Pic2"></td> </tr> </table> </div> </div> </center> <!--下面内容的客户端脚本不可放置在页面头部--> <script> Pic2.innerHTML=Pic1.innerHTML;//复制一组图片，但被隐藏 function scrolltoleft(){//定义向左移动的方法 sm.scrollLeft++;//改变层的水平坐标，实现向左移动 if(sm.scrollLeft>=Pic1.scrollWidth)//需要复位 sm.scrollLeft=0;//层的位置复位，浏览器窗口的宽度有限的 } var MyMar=setInterval(scrolltoleft,40); //定时器，方法名后不可加() function mouseover(x){//放大图片 x.style.width="210"; x.style.height="256" x.style.cursor="pointer" } function mouseout(x){//图片复原 x.style.width="105"; x.style.height="128" } //两面两行是用方法响应对象的事件 sm.οnmοuseοver=function(){//匿名方法（函数） clearInterval(MyMar);//停止滚动 } sm.οnmοuseοut=function(){ MyMar = setInterval(scrolltoleft,40);//继续滚动 } </script> </body> </html>
以上是关于实现一组图片循环且首尾相连的滚动效果的主要内容，如果未能解决你的问题，请参考以下文章