jcarousellite.js 基于Jquery的图片无缝滚动插件

最新推荐文章于 2018-11-04 16:42:43 发布

一个程序员的H

最新推荐文章于 2018-11-04 16:42:43 发布

阅读量408

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/crystal521love/article/details/36013583

本文介绍了如何在网页中引入jcarousellite.js插件，结合jQuery库来创建一个实现图片无缝滚动的特效，为用户提供流畅的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入JS库，jquery.js脚本和插件脚本jcarousellite.js。

<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript" src="path/to/jcarousellite.js"></script>

2.需要被展现的HTML结构 div>ul>li>img ，结构比较清晰

<div class="pic_lf float"></div>
<div class="jCarouselLite">
<ul> 
<li><img src="1.jpg" alt="" width="100" height="100" ></li> 
<li><img src="2.jpg" alt="" width="100" height="100" ></li> 
<li><img src="3.jpg" alt="" width="100" height="100" ></li> 
<li><img src="4.jpg" alt="" width="100" height="100" ></li> 
</ul> 
</div>
<div class="pic_rh float"></div>

3.执行启动脚本

if ($(".jCarouselLite li").length > 0) {
                $(".jCarouselLite ").jCarouselLite({
                    btnNext: ".pic_lf",
                    btnPrev: ".pic_rh",
                    visible: 6,
                    start: 0,
                    auto: 5000,
                    speed: 1000,
                    afterEnd:
            function (a) { }
                });
            }