<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- jquery引入 --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <link rel="stylesheet" href="./bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="./bootstrap/bootstrap-theme.min.css"> <script src="./bootstrap.min.js"></script> <style> * { margin: 0; padding: 0; } .slider { width: 600px; height: 400px; overflow: hidden; } .slider .slides { list-style-type: none; width: 3000px; height: 400px; display: flex; justify-content: center; } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="text-muted"> jQuery Basic Slide </h1> </div> <div class="slider"> <ul class="slides"> <li class="slide"><img src="./images/1.jpg" alt=""></li> <li class="slide"><img src="./images/2.jpg" alt=""></li> <li class="slide"><img src="./images/3.jpg" alt=""></li> <li class="slide"><img src="./images/4.jpg" alt=""></li> <li class="slide"><img src="./images/1.jpg" alt=""></li> </ul> </div> </div> <script> $(function () { setInterval(() => { if ($('ul').css('marginLeft') == '-2400px') { $('ul').css('marginLeft', '0px') } $('ul').animate({ marginLeft: '-=' + 600 + 'px' }, 2000); }, 3000); }) </script> </body> </html>