首页 > 代码库 > 简单的跑马灯效果(轮播图)

简单的跑马灯效果(轮播图)

逻辑简介:想要图片或者是文字向左移动,那肯定得用到定时器,那么移动那就必然是距离左边的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="http://www.mamicode.com/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>

 

简单的跑马灯效果(轮播图)