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文件