- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 无缝滚动跑马灯
- </title>
- <script src="https://code.jquery.com/jquery-3.3.1.min.js">
- </script>
- </head>
- <style>
- *{ margin:0; padding:0; } ul li{ list-style:none; } .main{ width: 300px;
- height:100px; margin:100px auto; position: relative; overflow: hidden;
- } .main li{ float: left; width:100px; height:100px; } .main ul{ width:300px;
- height:100px; position: absolute; left:0; top:0; } .main li:nth-child(odd){
- background-color: red; } .main li:nth-child(even){ background-color: blue;
- }
- </style>
- <body>
- <div class="main">
- <ul>
- <li>
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- </ul>
- </div>
- <script>
- $(".main ul").append($(".main ul").HTML());
- $(".main ul").width($(".main ul").width() * 2);
- $(function() {
- setInterval("my_left();", 10);
- });
- var left = 0;
- function my_left() {
- left -= 20;
- if (left <= -300) {
- left = 0;
- }
- console.log(left);
- $('.main ul').animate({
- 'left': left
- });
- }
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3006871.html