一、效果图
二、使用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); }