jcarousellite幻灯片滚动鼠标悬停效果（原）

最新推荐文章于 2021-12-10 10:57:32 发布

最新推荐文章于 2021-12-10 10:57:32 发布 · 293 阅读

文章标签：

#jQuery #JavaScript #PHP #HTML #框架 #ViewUI

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于 jQuery 的滑块插件 jcarousellite_1.0.1.js，并提供了一个包含鼠标悬停效果的示例代码。该插件支持自定义显示图片数量、滚动速度等参数。

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