先上图片
代码：
<!DOCTYPE html> <html lang="en"> <head> <title>jQ简单轮播图</title> <style> *{ margin: 0; padding: 0; } div{ width: 600px; height: 200px; border: 1px solid #000; margin: 100px auto; overflow: hidden; } ul{ list-style: none; width: 1800px; height: 200px; background:#000; } ul>li{ width: 300px; height: 200px; float: left; } li>img{ width: 300px; height: 200px; } </style> <script src="js/jquery-3.4.1.js"></script> <script> $(function(){ var offset = 0; var time; function autoTime() { time = setInterval(function() { offset += -10; if(offset <= -1200){//滚动4张后，切换到第一张，最后5、6的li和1、2的li,是一样的，防止直接切换不和谐 offset = 0; } $("ul").css("marginLeft",offset); }, 100); } autoTime(); $("li").hover(function () { clearInterval(time); $(this).siblings().fadeTo(100,0.5);//非当前li设置透明，展示ul背景颜色 $(this).fadeTo(100,1); }, function () { autoTime(); $("li").fadeTo(100,1); }) }); </script> </head> <body> <div> <ul> <li><img src="https://car3.autoimg.cn/cardfs/product/g2/M07/F5/39/1024x0_1_q95_autohomecar__ChsEkF5eYO6AKJwYAAZxic4CwxI158.jpg" alt=""></li> <li><img src="https://car2.autoimg.cn/cardfs/selected/520/g27/M05/98/07/520x390_0_q95_autohomecar__ChsEfF9guLOAPeb4AAFK3AIwGuo583.jpg" alt=""></li> <li><img src="https://car2.autoimg.cn/cardfs/selected/520/g26/M00/CF/E2/520x390_0_q95_autohomecar__ChwFkF8zVhaAbqfTAAFuTYdDJ6w672.jpg" alt=""></li> <li><img src="https://car3.autoimg.cn/cardfs/selected/520/g27/M09/97/FE/520x390_0_q95_autohomecar__ChsEfF9gtuSAMO05AAKnaUxcEZU436.jpg" alt=""></li> <li><img src="https://car3.autoimg.cn/cardfs/product/g2/M07/F5/39/1024x0_1_q95_autohomecar__ChsEkF5eYO6AKJwYAAZxic4CwxI158.jpg" alt=""></li> <li><img src="https://car2.autoimg.cn/cardfs/selected/520/g27/M05/98/07/520x390_0_q95_autohomecar__ChsEfF9guLOAPeb4AAFK3AIwGuo583.jpg" alt=""></li> </ul> </div> </body> </html>
