jcarousellite是一个开源的jQuery框架，官方网址：http://www.gmarwaha.com/jquery/jcarousellite/index.php 里面还有很多效果的Demo，感兴趣可以去看看。
以下是根据实际需求修改的一个版本，主要增加了鼠标悬停效果。（现实当中将按钮隐藏掉了）
HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>jQuery--jcarousellite--Demo</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jcarousellite_1.0.1.js"></script>
</HEAD>
<BODY>
官方网址：<a href="http://gmarwaha.com/jquery/jcarousellite/index.php" target="_blank">http://gmarwaha.com/jquery/jcarousellite/index.php</a>
<br />
<br />
<div class="default">
<button class="prev" ><<</button>
<button class="next">>></button>
<div class="carousel">
<ul>
<li><img src="image/1.jpg" width="100" height="100" alt="1"></li>
<li><img src="image/2.jpg" width="100" height="100" alt="2"></li>
<li><img src="image/3.jpg" width="100" height="100" alt="3"></li>
<li><img src="image/4.jpg" width="100" height="100" alt="4"></li>
<li><img src="image/5.jpg" width="100" height="100" alt="5"></li>
<li><img src="image/6.jpg" width="100" height="100" alt="6"></li>
<li><img src="image/7.jpg" width="100" height="100" alt="7"></li>
<li><img src="image/8.jpg" width="100" height="100" alt="8"></li>
<li><img src="image/9.jpg" width="100" height="100" alt="9"></li>
</ul>
</div>
</div>
<script type="text/javascript" >
var MyMar = null;
var SleepTime = 3000; //停留时长 单位毫秒
$(function() {
$(".carousel").jCarouselLite({
btnNext: ".default .next",
btnPrev: ".default .prev",
visible: 6, //显示图片数量
speed: 1000, //滚动完成时长 单位毫秒
scroll: 1 //每次滚动图片数量
});
$(".carousel").bind('mouseover',function(event){
clearInterval(MyMar);
})
.bind('mouseout',function(event){
MyMar=setInterval(next,SleepTime);
});
});
function next(){
$(".default .next").click();
}
MyMar = setInterval(next,SleepTime);
</script>
</BODY>
</HTML>
简单介绍一下jcarousellite_1.0.1.js的参数含义：
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null, //上一张按钮
btnNext: null, //下一张按钮
btnGo: null, //跳转到第几张
mouseWheel: false, //是否支持鼠标滚轮，需要jquery.mousewheel.js
auto: null, //是否自动滚动
speed: 200, //滚动时长
easing: null, //滚动优化，需要jquery.easing.1.1.js
vertical: false, //滚动方向，true垂直，false水平
circular: true, //是否重复播放，首位相接
visible: 3, //显示图片数量
start: 0, //从第几个开始滚动显示
scroll: 1, //每次滚动数量
beforeStart: null, //滚动前调用函数
afterEnd: null //滚动后调用函数
}, o || {});
附件中是涉及到的js文件
分享到：
相关推荐
不需要改的原网页的轮播插件，增加了鼠标悬停效果
jQuery-jcarousellite是一款基于jQuery库的轻量级图片轮播插件，它提供了丰富的水平和垂直滚动效果，适用于创建动态、吸引人的网页图像展示。本教程将深入讲解该插件的使用方法、核心功能以及如何自定义滚动效果。 ...
《基于jQuery的jcarousellite幻灯片插件详解及应用》 jcarousellite是一款高效、轻量级且功能丰富的jQuery插件，专为创建动态、可控的幻灯片展示而设计。这款插件在v1.0版本中，为网页设计师和开发者提供了灵活的...
jcarousellite是一款来自国外的jQuery插件，我们利用它可以实现很多功能，本文中，我们主要使用它完成一个可以控制左右切换的焦点图切换，幻灯片效果，当然，该幻灯片是可以自动切换的，唯一不足的之处是没有添加...
总结，jcarousellite是一个基于jQuery的图片滚动插件，提供源码供开发者定制，适合快速构建响应式的图片轮播效果。通过实例文件，我们可以学习如何配置和使用这个工具，为我们的网页添加生动的图片展示效果。同时，...
`jcarousellite.js`是一款轻量级、基于jQuery的图片无缝滚动插件，它可以帮助开发者轻松地在网页上实现图片轮播效果。这款插件的主要特点在于其简单易用性以及强大的定制能力，使得开发者可以根据自己的需求调整图片...
可以尝试减小`spped`值，或者调整`pauseOnHover`选项，使其在鼠标悬停时暂停。 #### 3.4 **按钮不起作用** 确认`prev`和`next`选择器是否对应了正确的HTML元素。如果按钮是动态生成的，可能需要使用事件委托来处理...
**jQuery图片滚动切换...无论是在产品展示、新闻滚动还是幻灯片应用中，它都能发挥出良好的效果。在实际使用过程中，结合HTML、CSS和JavaScript的基本知识，你可以根据需求调整和扩展插件功能，以满足更复杂的需求。
JCarouselLite是由GavickPro开发的一款小型但功能强大的jQuery插件，专门用于创建各种类型的滚动效果，如图片轮播、文本滚动等。它无需复杂的配置，只需少量代码即可实现流畅的滚动效果，大大简化了开发者的工作流程...
jcarousellite是一款来自国外的jQuery插件，我们利用它可以实现很多功能，这里我们主要使用它完成一个可以控制左右切换的焦点图切换，幻灯片效果，当然，该幻灯片是可以自动切换的，唯一不足的之处是没有添加文字，...
图片轮播插件jcarousellite.js
3. **jCarouselLite 插件**：jCarouselLite 提供了一些预定义的选项和方法来创建滚动效果。例如，`vertical` 选项决定是否垂直滚动，`scroll` 选项指定每次滚动的项目数量，`auto` 可以设置自动滚动的速度和方向。 ...
`jcarousellite`是一款基于jQuery的高效、灵活的滚动插件，它使得实现各种滚动效果变得简单易行。这款插件以其丰富的参数设置和强大的自定义能力，深受开发者喜爱。 ### 一、jcarousellite插件介绍 `jcarousellite...
基于jQuery的幻灯片图集效果是一种常见的网页动态展示技术，用于在有限的空间内展示多张图片或内容。这种效果通常被用在产品展示、图片画廊或新闻滚动等场景。下面我们将详细讨论如何利用jQuery实现这样的功能，以及...
摘要:脚本资源,jQuery,图片滚动 一款由jQuery插件实现的效果，主要是关于jquery插件jCarouselLite的问题，关于left:-5000px这行CSS，官方这段不知道有何用处,如果放进去就会显示不了图片了，js动态产生的值为何没有...
在IT行业中，网页开发...接着，引入jCarousellite的JavaScript文件，并在页面加载完成后调用该插件，指定要应用幻灯片效果的元素。通过设置参数，可以定制各种行为，如设置动画速度、是否循环播放等。例如： ```html ...
btnGo array 自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮：[“.1”, “.2”] mouseWheel bool 鼠标滑是否可以轮控制上下滚动,可选：...