简单的跑马灯效果（轮播图）
Posted 超级菜鸟-欢欢
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的跑马灯效果（轮播图）相关的知识，希望对你有一定的参考价值。
逻辑简介：想要图片或者是文字向左移动，那肯定得用到定时器，那么移动那就必然是距离左边的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>
以上是关于简单的跑马灯效果（轮播图）的主要内容，如果未能解决你的问题，请参考以下文章
横冲直撞vue(第四篇)：v-model指令系统总结指令系统示例轮播图实现指令系统示例跑马灯效果实现在vue中使用样式的方式