js 实现图片的无缝滚动
2018-03-07 17:53
417 查看
js 实现图片的无缝滚动
CreateTime--2018年3月7日17:18:34
Author:Marydon
测试成功
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="keywords" content="关键词,关键词"> <meta name="description" content="本网页内容描述"> <title>水平滚动-成功案例</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <!-- 图片等比缩放 --> <script type="text/javascript" src="../js/drawImage.js"></script> <!-- 图片无缝滚动 --> <script type="text/javascript" src="../js/marquee.js"></script> <script type="text/javascript"> $(function(){ var marquee = new Marquee(); // 右滚动 //marquee.init(null,null,"imgContainer", "imgContainer_child"); // 左滚动 marquee.init("left",null,"imgContainer", "imgContainer_child"); }); </script> </head> <body> <!-- 照片的宽度:142*3=426px,所以父容器的宽度最大为426; 要想扩大父容器的宽度,必须再增加照片,而且也必须遵循上面的规则 --> <div id="imgContainer" style="overflow: hidden; height: 140px; width: 426px; background: url(../images/bgImg.jpg);"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td id="imgContainer_child"> <table border="0" cellpadding="11" cellspacing="0" style="margin-top: 9px;"> <tbody> <tr> <td> <a href="#" target="_blank" class=""> <img src="../images/6.png" title="第一张" onload="javascript:DrawImage(this,145,100)"/> </a> </td> <td> <a href="#" target="_blank" class=""> <img src="../images/9.png" title="第二张" onload="javascript:DrawImage(this,145,100)"/> </a> </td> <td> <a href="#" target="_blank" class=""> <img src="../images/14.png" title="第三张" onload="javascript:DrawImage(this,145,100)"/> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html>
效果展示:
左滚动
右滚动
说明:这是截的动态图,实际运行并不卡顿!
这里只展示了左滚动和右滚动,想掌握上滚动与下滚动或获取源码+素材的童鞋,请看下方的指引“如何获取本人原创代码?”
相关推荐:
图片等比缩放,请移步至文章:js实现图片的等比例缩放
图片无缝滚动,请移步至文章:marquee.js
相关文章推荐
- JS实现图片无缝滚动的完美解决 无间隙滚动
- js实现图片无缝滚动
- js实现图片无缝滚动
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- js实现图片无缝滚动特效
- (20)JS实现简单的图片向左无缝滚动
- JS实现图片无缝滚动特效;附addEventListener()方法、offsetLeft和offsetWidth属性。
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- JS实现图片无缝滚动
- JS实现横向图片无缝滚动
- JS实现图片无缝滚动
- js 实现图片无缝滚动
- JS实现图片无缝滚动的完美解决 无间隙滚动
- 一款JS+CSS实现的无缝平滑图片滚动代码
- js实现图片的无缝滚动
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- JS实现图片无缝滚动效果
- JS实现图片无缝滚动的完美解决 无间隙滚动