逻辑简介：想要图片或者是文字向左移动，那肯定得用到定时器，那么移动那就必然是距离左边的left值在改变；核心问题就是通过定时器来改变ul距离left的值；本姑娘就是简简单单直直接接，上代码吧。如有什么不懂可以提问。。。
效果图：
到
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>跑马灯</title>
6 <style>
7 .outBox{width:400px;height:40px;overflow: hidden;margin:0 auto;border:1px solid #419BF9;position:relative;background-color: #2B2F33;color:#ffffff;border-radius:4px;}
8 .ulPmd{width:600px;height:40px;position:absolute;left:0;top:0}
9 .ulPmd li{width:auto;height:40px;float:left;list-style: none;margin-left:20px;line-height:8px}
10 </style>
11 <script src="js/jquery-3.1.0.min.js"></script>
12 <script>
13 $(function () {
14 var i=0;
15 var timer;
16 timer=setInterval(function(){
17 //根据ul的位移来判断一秒钟向左移动的距离；
18 if(i>$(‘li‘).length){
19 i=1;
20 }else{
21 i++;
22 }
23 var ulLeft=-($(‘li‘).width())*i;
24 $(‘.ulPmd‘).css(‘left‘,ulLeft)
25 },1000);
26 //鼠标滑过li的时候，清除定时器
27 $(‘li‘).on(‘mouseover‘,function () {
28 clearInterval(timer)
29 });
30 //鼠标滑出li的时候，继续定时器
31 $(‘li‘).on(‘mouseout‘,function () {
32 timer=setInterval(function() {
33 //根据ul的位移来判断一秒钟向左移动的距离；
34 if(i>$(‘li‘).length){
35 i=1;
36 }else{
37 i++;
38 }
39 var ulLeft=-($(‘li‘).width())*i;
40 $(‘.ulPmd‘).css(‘left‘,ulLeft)
41 },1000);
42 })
43 })
44
45 </script>
46 </head>
47 <body>
48 <div class="outBox">
49 <ul class="ulPmd">
50 <li>item1</li>
51 <li>item2</li>
52 <li>item3</li>
53 <li>item4</li>
54 <li>item6</li>
55 <li>item7</li>
56 <li>item8</li>
57 <li>item9</li>
58 <li>item10</li>
59 </ul>
60 </div>
61
62 </body>
63 </html>
时间： 2024-11-03 11:31:37