jQuery实现滚动的图片

最新推荐文章于 2022-06-28 20:13:35 发布

最新推荐文章于 2022-06-28 20:13:35 发布 · 140 阅读

文章标签：

#jQuery #CSS #PHP #JSP #ViewUI

js、jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jCarouselLite插件实现图片滚动效果。包括下载地址、必需文件的引入方式及具体配置方法。文中还提供了自定义div宽度的解决方案。

下载地址[url]http://www.gmarwaha.com/jquery/jcarousellite/index.php#install[/url]
建议下载Uncompressed，里面有例子。
引入jcarousellite.js，<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>
如果想添加滚轮支持，则需要引入<script type="text/javascript" src="path/to/easing.js"></script>
<script type="text/javascript" src="path/to/mousewheel.js"></script>
然后 jsp：
<div class="jCarousel">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>

js：
$(".jCarousel").jCarouselLite({
mouseWheel: true,
auto: 800,
speed: 1000

});

这样便实现了图片的滚动了。其中有很多属性可以自己选择。
在使用过程中遇到一个问题，div宽度不能自定义，我们可以把修改div.css(sizeCss, divSize+"px");这句代码：
1、直接注释掉
2、增加一个参数，根据该参数来判断。这样我们便可以自如的控制div的宽度或者高度了。