简单的跑马灯效果（轮播图）

最新推荐文章于 2022-02-17 14:49:27 发布

weixin_30950887

最新推荐文章于 2022-02-17 14:49:27 发布

阅读量1.4k

点赞数

文章标签： axure

原文链接：http://www.cnblogs.com/ouyangyulin/p/6904806.html

版权

逻辑简介：想要图片或者是文字向左移动，那肯定得用到定时器，那么移动那就必然是距离左边的left值在改变；核心问题就是通过定时器来改变ul距离left的值；本姑娘就是简简单单直直接接，上代码吧。如有什么不懂可以提问。。。

效果图：

到

方法一：可以用一个标签搞定，即是：

<marquee>ddddddd</marquee>
方法二：还是老老实实的用js写

 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>

转载于:https://www.cnblogs.com/ouyangyulin/p/6904806.html

weixin_30950887

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的跑马灯效果（轮播图）

逻辑简介：想要图片或者是文字向左移动，那肯定得用到定时器，那么移动那就必然是距离左边的left值在改变；核心问题就是通过定时器来改变ul距离left的值；本姑娘就是简简单单直直接接，上代码吧。如有什么不懂可以提问。。。效果图：到方法一：可以用一个标签搞定，即是：<marquee>ddddddd</marquee>方法二：还是老老实实的用js写 1 ...
复制链接

扫一扫