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>
效果展示：
左滾動
右滾動
說明：這是截的動態圖，實際運行並不卡頓！
這里只展示了左滾動和右滾動，想掌握上滾動與下滾動或獲取源碼+素材的童鞋，請看下方的指引“如何獲取本人原創代碼？”