`
raymond.chen
  • 浏览: 1436962 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

图片滚动插件:jcarousellite

 
阅读更多

源码:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>
	<style type="text/css">
		.jCarouselLite li img{
			background-color: #fff;
			margin: 5px;
		}
	</style>
</head>

<body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>
	<script language="javascript">
		jQuery(document).ready(function(){
			jQuery(".jCarouselLite").jCarouselLite({
				btnPrev: ".prev", //上一个按钮的class名
				btnNext: ".next", //下一个按钮的class名
				mouseWheel: true, //鼠标滑轮是否可以控制上下滚动,默认false
				auto: 0, //指定多少毫秒内容定期自动滚动。默认为空(null)不滚动
				speed: 1000, //滑动的速度
				vertical: false, //是否垂直滚动,默认为false
				circular: true, //是否循环滚动,默认为true
				visible: 2, //可见数量
				start: 0, //开始的地方,默认是0
				scroll: 1, //每次滚动的li数量
				beforeStart: function(a){ //滚动开始时回调的函数
					//alert(jQuery(a).attr("id"));
				},
				afterEnd: function(a){ //滚动结束时回调的函数
					//alert(jQuery(a).attr("id"));
				}
			});
		});
	</script>

	<table style="border:1px solid black;background-color:#B0C4DE;">
		<tr>
			<td valign=center><a class="prev">&lt;&lt;</a></td>
			<td>
				<div class="jCarouselLite">
					<ul>
						<li><img src="1.jpg" width="100" height="100"></li>
						<li><img src="2.jpg" width="100" height="100"></li>
						<li><img src="3.jpg" width="100" height="100"></li>
						<li><img src="1.jpg" width="100" height="100"></li>
						<li><img src="2.jpg" width="100" height="100"></li>
						<li><img src="3.jpg" width="100" height="100"></li>
					</ul>
				</div>
			</td>
			<td valign=center><a class="next">&gt;&gt;</a></td>
		</tr>
	</table>

</body>
</html>

 

 

  • 大小: 13.3 KB
分享到:
评论

相关推荐

    E_jquery图片滚动切换插件 jCarousel Lite

    总的来说,`jCarousel Lite`是一个简单实用的jQuery图片滚动插件,通过灵活的配置和简单的HTML结构,开发者可以快速地在网站上实现专业级别的图片滚动效果。无论是在产品展示、新闻滚动还是幻灯片应用中,它都能发挥...

    滚动条插件

    JCarouselLite是一款基于jQuery的轻量级滚动插件,它以其高效、灵活和易用性受到了众多开发者们的喜爱。本文将深入探讨JCarouselLite的特性和使用方法。 ### 1. 插件简介 JCarouselLite是由GavickPro开发的一款...

    jcarousellite.js 基于Jquery的图片无缝滚动插件

    ### jcarousellite.js 基于Jquery的图片无缝滚动插件 #### 简介 `jcarousellite.js`是一款轻量级、基于jQuery的图片无缝滚动插件,它可以帮助开发者轻松地在网页上实现图片轮播效果。这款插件的主要特点在于其简单...

    js滚动插件及案例

    `jcarousellite`是一款基于jQuery的高效、灵活的滚动插件,它使得实现各种滚动效果变得简单易行。这款插件以其丰富的参数设置和强大的自定义能力,深受开发者喜爱。 ### 一、jcarousellite插件介绍 `jcarousellite...

    jQuery-jcarousellite水平、垂直滚动图片效果演示

    3. **动态加载**:当图片滚动到视窗范围内时才加载,优化页面加载速度,尤其对大型图片集来说非常有用。 4. **触发动画**:支持多种过渡效果,如淡入淡出、滑动等,使图片切换更加生动。 5. **响应式设计**:适应...

    基于jQuery图片平滑连续滚动插件

    http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充 * * * 技术支持:...

    jquery 图片轮换

    jcarousellite是专门为jQuery设计的一个轻量级的图片轮播插件,它提供了一套完整的解决方案来实现图片的自动滚动、手动导航和多种过渡效果。这个插件的特点包括: 1. **易于使用**:只需引入必要的CSS和JavaScript...

    jquery插件jCarouselLite 图片滚动+停顿代码

    摘要:脚本资源,jQuery,图片滚动 一款由jQuery插件实现的效果,主要是关于jquery插件jCarouselLite的问题,关于left:-5000px这行CSS,官方这段不知道有何用处,如果放进去就会显示不了图片了,js动态产生的值为何没有...

    jcarousellite幻灯片滚动鼠标悬停效果(原)

    首先,jcarousellite是一款基于jQuery的轻量级轮播插件,其主要功能是实现图片或内容的自动循环滚动。通过调用这个插件,我们可以轻松创建出各种动态展示效果,如左右滑动、上下滚动等。在这个过程中,`...

    jcarousellite 基于jquery的可控切换的幻灯片 v1.0.zip

    jcarousellite是一款基于jQuery的轻量级幻灯片插件,为开发者提供了可控的切换功能,使得网页中的图片、文本等元素能够流畅地进行自动或手动滑动展示。本文将深入探讨jcarousellite的原理、使用方法以及常见应用场景...

    JQuery插件jcarousellite的参数中文说明

    JQuery插件jcarousellite是一款用于创建动态轮播效果的工具,它允许开发者通过配置一系列参数来定制轮播的行为。下面将详细解释这些参数的含义: 1. **btnPrev** (string): 这个参数定义了“上一个”按钮的CSS类名...

    多年收集积累的JavaScript /jQuery插件/UI资料合集(90个).zip

    jcarousellite图片滚动.rar JQuery Tab.rar JQuery zTree v3.1.zip jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动.rar jQuery&amp;CSS图形下拉菜单.rar jQuery+php实现ajax文件即时上传.zip jquery下拉竖...

    大图片浏览jquery代码(例用jcarousellite不算太完美)

    jCarousellite是一款轻量级的轮播插件,可以用于创建图片滑动展示效果,但可能在某些特定需求下并非完美的解决方案。因此,博主可能会探讨其优点,如易于使用、自定义程度高,以及可能存在的局限性,比如性能、兼容...

    jquery 很酷的滚动效果。

    3. **jCarouselLite 插件**:jCarouselLite 提供了一些预定义的选项和方法来创建滚动效果。例如,`vertical` 选项决定是否垂直滚动,`scroll` 选项指定每次滚动的项目数量,`auto` 可以设置自动滚动的速度和方向。 ...

    Jjcarousellite 实现图片列表滚动的简单实例

    总的来说,Jjcarousellite 是一个简单易用的图片列表滚动插件,通过灵活的配置选项,可以轻松适应各种网页设计需求,为用户提供流畅的浏览体验。如果你正在寻找一个轻量级、高度可定制的图片滚动解决方案,...

    图片浏览html

    jCarousellite是一个轻量级的jQuery插件,专为创建具有滚动效果的图片或内容列表而设计。它提供了自定义选项,如自动播放速度、导航箭头和指示器,以及触发动画等。 关于jCarousellite的使用,开发者首先需要在HTML...

    javascript 轮换图片

    `jCarousel`是基于jQuery的一个轻量级且功能强大的图片轮换插件,适用于创建各种类型的滑动或滚动效果。 `jCarousel Lite`,正如你在描述中提到的,是从...

Global site tag (gtag.js) - Google Analytics