<p><code></p> <h1 id="articleHeader0"><a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>-rollad</h1> <h2 id="articleHeader1">广告轮番图--模仿网易云音乐的广告轮番图</h2> <h3 id="articleHeader2">这是网易音乐的效果图:</h3> <p><span class="img-wrap"><img data-src="/img/bVCCCy" src="/img/bVCCCy" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <h3 id="articleHeader3">这是轮播插件的效果图:</h3> <p><span class="img-wrap"><img data-src="/img/bVCCCz" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>你只需将项目的 html 模板插入到你的html页面中:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <article class=&quot;jq-roll&quot;> <!--......--><br /> </article> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code> &lt;article <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"jq-roll"</span>&gt; <span class="xml"><span class="hljs-comment">&lt;!--......--&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span></span></code></pre> <p>并在html头部加入样式</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/roll-ad.css&quot;>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code style="word-break: break-word; white-space: initial;"> &lt;link <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text/css"</span> rel=<span class="hljs-string">"stylesheet"</span> href=<span class="hljs-string">"css/roll-ad.css"</span>&gt;</code></pre> <p>body底部加入 script 脚本即可</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <script src=&quot;http://libs.baidu.com/jquery/1.11.3/jquery.min.js&quot;></script><br /> <script src=&quot;js/jquery.roll-ad.js&quot;></script></p> <p> <script> RollAd.init($('.rollad')); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://libs.baidu.com/jquery/1.11.3/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.roll-ad.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> RollAd.init($(<span class="hljs-string">'.rollad'</span>)); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>其中 <code>&lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> class="rollad" </code> 的 <code>data-setting</code> 属性 应许你自定义,设置你所需的参数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div class=&quot;rollad&quot; data-setting ='{ &quot;width&quot;:800, &quot;height&quot;:250, &quot;liWidth&quot;:520, &quot;liHeight&quot;:220, &quot;delay&quot;:1000 }'>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code> &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"rollad"</span> data-setting ='{ <span class="hljs-string">"width"</span>:<span class="hljs-number">800</span>, <span class="hljs-string">"height"</span>:<span class="hljs-number">250</span>, <span class="hljs-string">"liWidth"</span>:<span class="hljs-number">520</span>, <span class="hljs-string">"liHeight"</span>:<span class="hljs-number">220</span>, <span class="hljs-string">"delay"</span>:<span class="hljs-number">1000</span> }'&gt;</code></pre> <p>具体源码可以到我的 github 查看 -- <a href="https://github.com/ZengTianShengZ/jQuery-rollad" rel="nofollow noreferrer" target="_blank">项目链接</a></p> <p></code></p>

本文固定链接:

jquery插件-轮番图 广告

http://www.js-code.com/jquery/jquery_40268.html

80%的人都看过