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

逻辑简介：想要图片或者是文字向左移动，那肯定得用到定时器，那么移动那就必然是距离左边的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

简单的跑马灯效果（轮播图）相关推荐

Android 循环滚动控件ViewFlipper，可实现跑马灯或轮播图效果
ViewFlipper--Android循环滚动控件 1.效果如下: 2.实现方法 (1)创建进出动画上下滚动动画 y_in.xml <?xml version="1.0" ...
JavaScript简单点击切换效果——轮播图
如何实现一个简单轮播图效果,通过点击切换图片?在JavaScript内容的实现是使用点击触发事件,改变src图片路径. 直接展示JS代码哈! // 创建一个数组来保存图片的路径var imgArr = ...
老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
iOS 封装跑马灯和轮播效果
代码地址如下: http://www.demodashi.com/demo/14075.html 功能概述和预览功能描述:WSL_RollView 是基于UICollectionView实现的支持水 ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能
简要教程 jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得 ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
使用CSS实现简单的图片切换（轮播图）
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...

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

简单的跑马灯效果（轮播图）相关推荐

最新文章

热门文章