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幻灯片插件详解及应用》 jcarousellite是一款高效、轻量级且功能丰富的jQuery插件，专为创建动态、可控的幻灯片展示而设计。这款插件在v1.0版本中，为网页设计师和开发者提供了灵活的...
**jQuery图片滚动切换...无论是在产品展示、新闻滚动还是幻灯片应用中，它都能发挥出良好的效果。在实际使用过程中，结合HTML、CSS和JavaScript的基本知识，你可以根据需求调整和扩展插件功能，以满足更复杂的需求。
jCarouselLite 是一个轻量级的 jQuery 插件，用于创建幻灯片或图片轮播效果。它支持自动播放和手动控制等功能。 **3.6 jCarousel** jCarousel 是一个功能更强大的 jQuery 幻灯片插件，它支持更多的配置选项和过渡...
- **简介**：简单的幻灯片插件。 - **特点**： - 支持自动播放。 - 可以设置切换间隔。 ##### 3. EasyNews - **简介**：用于展示新闻或文章列表的插件。 - **特点**： - 支持图片轮播。 - 可以显示摘要信息。 ...