首页 > 代码库 > 简单的跑马灯效果（轮播图）
简单的跑马灯效果（轮播图）
逻辑简介：想要图片或者是文字向左移动，那肯定得用到定时器，那么移动那就必然是距离左边的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>
简单的跑马灯效果（轮播图）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。