使用方法：
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
<script src="jquery-1.11.2.min.js"></script><script src="marquee.js"></script>
HTML结构：
跑马灯中的文字使用无序列表来制作，外面使用一个<div>作为包裹容器。
123456789101112 <div class="container"> <div class="marquee-sibling"> Breaking News </div> <div class="marquee"> <ul class="marquee-content-items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div></div>
CSS样式：
下面是该跑马灯特效的一些基本样式。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 .container { width: 100% background: #4FC2E5 float: left display: inline-block overflow: hidden box-sizing: border-box height: 45px position: relative cursor: pointer} .marquee-sibling { padding: 0 background: #3BB0D6 width: 20% height: 45px line-height: 42px font-size: 12px font-weight: normal color: #ffffff text-align: center float: left left: 0 z-index: 2000} .marquee,*[class^="marquee"] { display: inline-block white-space: nowrap position: absolute} .marquee { margin-left: 25% } .marquee-content-items { display: inline-block padding: 5px margin: 0 height: 45px position: relative} .marquee-content-items li { display: inline-block line-height: 35px color: #fff} .marquee-content-items li:after { content: "|" margin: 0 1em}
初始化插件：
123 $(function (){ createMarquee()})
在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。
配置参数：
下面是该跑马灯特效的可用配置参数。
12345678910111213141516171819202122232425262728 $(function (){ createMarquee({ // controls the speed at which the marquee moves duration:30000, // right margin between consecutive marquees padding:20, // class of the actual div or span that will be used to create the marquee - // multiple marquee items may be created using this item's content. // This item will be removed from the dom marquee_class:'.example-marquee', // the container div in which the marquee content will animate. container_class: '.example-container', // a sibling item to the marqueed item that affects - // the end point position and available space inside the container. sibling_class: '.example-sibling', // Boolean to indicate whether pause on hover should is required. hover: false }) })
要实现简单的跑马灯效果其实运用html中<marquee></marquee>标签就可以达到了基本属性如下： 1.滚动方向direction（包括4个值：up、 down、 left和 right） 2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动） 3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位） 4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒） 5.滚动循环loop（默认值是-1，滚动会不断的循环下去） 6.滚动范围width、height 7.滚动背景颜色bgcolor 8.空白空间hspace、vspace如果想要更多的动画效果，更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果1.html 中写入<ul id="marquee"><li></li></ul> 2.js中调入$("#marquee").marquee()即可 3.css比较简单，一般自己写，大致如下： ul.marquee{display:blockline-height:1position:relativeoverflow:hiddenwidth:400pxheight:22px}ul.marquee li{ position:absolutetop:-999emleft:0display:blockwhite-space:nowrap padding:3px5pxtext-indent:0.8em} 4.相关参数如下： {yScroll:"top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed:850 // 初始下拉速度 scrollSpeed:12 // 滚动速度 pauseSpeed:5000 // 滚动完到下一条的间隔时间 pauseOnHover:true // 鼠标滑向文字时是否停止滚动 loop:-1 // 设置循环滚动次数 （-1为无限循环） fxEasingShow:"swing" // 缓冲效果 fxEasingScroll:"linear" // 缓冲效果 cssShowing:"marquee-showing" //定义class event handlers init:null // 初始调用函数 beforeshow:null // 滚动前回调函数 show:null // 当新的滚动内容显示时回调函数 aftershow:null // 滚动完了回调函数 }打开 Dreamweaver新建 HTML 文档；
修改标题为"跑马灯"
保存为 index.html 文件。
jquery跑马灯 图片不间断滚动效果
首先，编写跑马灯部分的静态 HTML 代码，把图片排列起来
在 <body>和 </body>标签中添加以下代码：
<div>
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
</ul>
</div>
jquery跑马灯 图片不间断滚动效果
给上一步的 HTML 代码中的 div 标签增加 class 属性，如下：
<div class="con">
编写跑马灯部分的 CSS 样式代码，代码放在 <head>和 </head>标签中，如下：
<style type="text/css">
ul{list-style:nonepadding:0margin:0}
.con{ width:1105pxheight:225pxoverflow:hiddenborder:2px solid #666margin:10px auto 0 autopadding:5px 0 0 5px}
.con ul li{ float:leftmargin:0 5px 10px 0}
.con ul li img{ display:blockwidth:209pxheight:209pxpadding:2pxborder:1px solid #ccc}
</style>
jquery跑马灯 图片不间断滚动效果
引入 JQuery 库
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
引入 Marquee 插件
<script type="text/javascript" src="marquee2.js"></script>
代码放在 </body>标签前，如图：
jquery跑马灯 图片不间断滚动效果
给 div 增加 marquee 类
<div class="con marquee">
保存文件，在浏览器中打开，就可以看到图片开始滚动了。
jquery跑马灯 图片不间断滚动效果
图片默认的滚动方向是“向上滚动”
如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：
up 上
down 下
left 左
right 右
jquery跑马灯 图片不间断滚动效果
完整的例子放在百度网盘中，需要的请发邮件到 [email protected]
主题写 “百度经验”。自动回复下载地址
