自己使用jquery写的一个无缝滚动的插件

2020-05-16 18:47:17易采站长站整理

效果图:
 
html代码:

<h1>无缝滚动,向右滚动</h1>
<ul id=”guoul1″>
<li><img src=”img/f1.jpg” alt=”f1″/></li>
<li><img src=”img/f2.jpg” alt=”f2″/></li>
<li><img src=”img/f3.jpg” alt=”f3″/></li>
<li><img src=”img/f4.jpg” alt=”f4″/></li>
<li><img src=”img/f5.jpg” alt=”f5″/></li>
<li><img src=”img/f6.jpg” alt=”f6″/></li>
<li><img src=”img/f7.jpg” alt=”f7″/></li>
</ul>
<h1>无缝滚动,向左滚动</h1>
<ul id=”guoul2″>
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>无缝滚动,向上滚动</h1>
<ul id=”guoul3″>
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>无缝滚动,向下滚动</h1>
<ul id=”guoul4″>
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>无缝滚动,非ul,li标签组合,向右滚动</h1>
<div id=”guoul5″>
<p>111111111111</p>
<p>222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
<p>5555555555555</p>
<p>6666666666666</p>
<p>7777777777777</p>
<p>8888888888888</p>
<p>9999999999999</p>
</div>
<h1>不动</h1>
<ul id=”guoul6″>
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>