一、效果圖
二、使用CSS實現
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圖片無縫滾動</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #con{ width: 800px; margin: auto; margin-top: 100px; /* 超出div的部分隱藏 */ overflow: hidden; height: 158px; } li{ list-style: none; float: left; } img{ width: 240px; height: 150px; margin: 5px; border-radius: 5px; } ul{ width: 2500px; } /* 動畫播放狀態 */ ul:hover{ cursor: pointer; /* 當鼠標移動到圖片上時動畫停止 */ animation-play-state:paused; } /* 實現動畫 */ #ul{ /* 動畫名稱 ，在定義關鍵幀動畫時需要使用*/ animation-name: moveleft; /* 動畫持續時間 */ animation-duration: 10s; /* 設置動畫速度曲線:線性 */ animation-timing-function: linear; /* 動畫的播放次數:無限次 */ animation-iteration-count: infinite; /* 動畫的奇偶輪流播放：奇數次正向播放，偶數次反向播放 */ /* animation-direction: alternate; */ } /* 定義關鍵幀動畫 */ @keyframes moveleft{ /* ul從左邊0位置到左邊-1250px位置 */ from{ margin-left: 0px; } to{ margin-left: -1250px; } } </style> </head> <body> <div id="con"> <ul id="ul"> <li><img src="../img/21.jpg" ></li> <li><img src="../img/22.jpg" ></li> <li><img src="../img/23.jpg" ></li> <li><img src="../img/24.jpg" ></li> <li><img src="../img/25.jpg" ></li> <li><img src="../img/21.jpg" ></li> <li><img src="../img/22.jpg" ></li> <li><img src="../img/23.jpg" ></li> <li><img src="../img/24.jpg" ></li> <li><img src="../img/25.jpg" ></li> </ul> </div> </body> </html>
三、使用jQuery實現
HTML和css代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圖片無縫滾動</title> <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script src="../js/圖片無縫滾動.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; } #con{ width: 800px; margin: auto; margin-top: 100px; overflow: hidden; height: 158px; } li{ list-style: none; float: left; } img{ width: 240px; height: 150px; margin: 5px; border-radius: 5px; } ul{ width: 2500px; cursor: pointer; } </style> </head> <body> <div id="con"> <ul id="ul"> <li><img src="../img/21.jpg" ></li> <li><img src="../img/22.jpg" ></li> <li><img src="../img/23.jpg" ></li> <li><img src="../img/24.jpg" ></li> <li><img src="../img/25.jpg" ></li> <li><img src="../img/10.jpg" ></li> <li><img src="../img/21.jpg" ></li> <li><img src="../img/22.jpg" ></li> <li><img src="../img/23.jpg" ></li> <li><img src="../img/24.jpg" ></li> <!-- <li><img src="../img/25.jpg" ></li> --> </ul> </div> </body> </html>
js代碼：
var move; var lv = 0; $(function() { //第一種方法 //move = setInterval("moveLeft()", 5); //第二種方法 move(); }); //方法一 function moveLeft() { var ul = $("ul"); var li = $("li"); lv += 1; //獲取ul的左邊距 if (lv > 1500) { lv = 0; } $("ul").css("margin-left", -lv + "px"); ul.mouseover(function(){ $("ul").css({"animationPlayState":"paused"}); }) } //方法二 function move(){ //鼠標移入移出事件 $("ul").mouseover(function(){ $(this).stop(true); }); $("ul").mouseout(function(){ move(); }); //獲取ul綁定動畫往左移動 $("ul").animate({marginLeft:-1500},3000); $("ul").animate({marginLeft:0},0,move); }