`
seyaa
  • 浏览: 55588 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

闲着无聊做一个jquery图片滚动插件

阅读更多
没事的时候研究了下jquery插件开发,就顺手写了点插件。未经过严谨额测试,权当玩玩......

分为 两个方向的滚动:
首先引入jquery库:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

上下方向:

引入js和css:
<link href="css/imgScoll-tm-1.0.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="imgScoll-mt-1.0.js"></script>

如何使用:
<script type="text/javascript">
$(function(){
	  // 文档就绪
	  $("#view").imgScoll({
		  	width:240,
		  	height:315,
		  	speed:10,
		  	delay:1000,
		  	direction:'mtt',
		  	data:{"totalCount" : 7,
				"result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},
							{"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},
				          	{"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},
				          	{"src":'images/4.jpg',"describe":'4444444444',"href":'#'},
				          	{"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},
				          	{"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},
				         	{"src":'images/1.jpg',"describe":'7777777777777',"href":'#'}
				      ]
			}
		  });
	  	
	  
});
</script>

<div id="view" ></div>
	


左右方向:

引入js和css:
<link href="css/imgScoll-rl-1.0.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="imgScoll-rl-1.0.js"></script>

如何使用:
<script type="text/javascript">
$(function(){
	  // 文档就绪
	  $("#view").imgScoll({
		  	width:1002,
		  	height:263,
		  	speed:20,
		  	delay:1000,
		  	direction:'ltr',
		  	data:{"totalCount" : 7,
				"result" : [{"src":'images/1.jpg',"describe":'test1test1test1',"href":'#'},
							{"src":'images/2.jpg',"describe":'test2test2test2',"href":'#'},
				          	{"src":'images/3.jpg',"describe":'test3test3test3test3',"href":'#'},
				          	{"src":'images/4.jpg',"describe":'4444444444',"href":'#'},
				          	{"src":'images/5.jpg',"describe":'55555555555555',"href":'#'},
				          	{"src":'images/6.jpg',"describe":'6666666666666',"href":'#'},
				         	{"src":'images/5.jpg',"describe":'7777777777777',"href":'#'}
				      ]
			}
		  });
	  	
	  var p = $("p:first");
	  $("#view").scrollLeft(500);
});
</script>
<div id="view" ></div>

分享到:
评论

相关推荐

    闲着无聊,画了一个万年历原理图!-原理图.pdf

    闲着无聊,画了一个万年历原理图!-原理图.pdf

    闲着无聊做的基于Winforms的房屋租赁管理系统.zip

    管理系统是一种通过计算机技术实现的用于组织、监控和控制各种活动的软件系统。这些系统通常被设计用来提高效率、减少错误、加强安全性,同时提供数据和信息支持。以下是一些常见类型的管理系统: 学校管理系统: ...

    ThinkSNS扩展插件之插件生成器.zip

    在安装本插件的时候自动建立一个文件用以存储用本插件制作的插件的信息,因此用过本插件的童鞋更新过插件时,去adons 表将本插件的记录删除。或者找到官方的卸载插件的地方卸载本插件,重新安装(在模板中看到过此...

    闲着无聊弄个猜拳的,对swing的布局还不是很了解啊

    标题中的“猜拳的”指的是一个简单的计算机程序,可能是用Java Swing库开发的,用于实现人机对战的“剪刀石头布”游戏。Swing是Java提供的一个用于创建图形用户界面(GUI)的库,它包含了一系列组件,如按钮、文本框...

    闲着做了个菜单

    【标题】"闲着做了个菜单"所涉及的知识点主要集中在网页开发中的用户界面设计,尤其是下拉菜单的实现。菜单是网站或应用程序中至关重要的交互元素,它帮助用户导航和访问不同功能或内容。在这个项目中,创建了一个...

    5ucms移动端插件(手机版)asp版v1.0UTF版

    5ucms移动端插件(手机版)是以5ucms ... 一个很简单的移动端例子,需要跟多功能的可以二次开发下。 此版本为是动态版,没写生成静态。 文件目录说明: /plus/A_Qimweb/ ------ 插件管理目录 /m/ ------ 移动页面目录 /m/

    基于jQuery实现弹幕APP

    今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击“弹幕发射”或回车可以输出弹幕到弹幕墙上。 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机。 ...

    2020年深圳杯A题.docx 这是2020深圳杯建模的A题大佬们闲着的时候可以做一做.zip

    【描述】提到"大佬们闲着的时候可以做一做",这暗示了该题目有一定的难度,适合有一定数学建模基础或经验的参赛者。深圳杯A题可能涵盖多个领域的知识,包括但不限于概率统计、线性代数、微积分、运筹学、优化理论等...

    调用DLL示例最新附加易语言

    最近闲着无聊做了个易语言的 基本上覆盖了目前主流的开发语言,DLL使用C++编写,演示了VB、C++、DELPHI、JAVA、C#、汇编、易语言调用这个DLL的方法。有些语言我提供了静态和动态2种调用方法。没有写的恕我孤陋寡闻...

    5ucms移动端插件(手机版)v1.0GBK版

    5ucms移动端插件(手机版)是以5ucms ... 一个很简单的移动端例子,需要跟多功能的可以二次开发下。 此版本为是动态版,没写生成静态。 文件目录说明: /plus/A_Qimweb/ ------ 插件管理目录 /m/ ------ 移动页面目录 /m/

    调用DLL示例最新附加JNA

    最近闲着无聊做了个JNA的,第2种JAVA调用DLL库了 基本上覆盖了目前主流的开发语言,DLL使用C++编写,演示了VB、C++、DELPHI、JAVA、C#、汇编、易语言调用这个DLL的方法。有些语言我提供了静态和动态2种调用方法。...

    5ucms移动端插件(手机版) v1.0.zip

    一个很简单的移动端例子,需要跟多功能的可以二次开发下。 此版本为是动态版,没写生成静态。 文件目录说明: /plus/A_Qimweb/ ------ 插件管理目录 /m/ ------ 移动页面目录 /m/css/ ------ 移动样式目录 /m/...

    jquery 列表双向选择器之改进版

    记得之前发表过一篇《Jquery简单应用总结》,最后有一个自己做的列表双向选择器,感觉有点挫,昨天闲着没事改进了一下,把元素改成了select option这样就支持shift多选,代码量也精简了些。 我的双向选择器支持批量...

    闲着没事Hessian开发WebService的总结(一)

    从压缩包子文件的文件名称“BurlapWS”来看,这可能是与Burlap相关的,Burlap是Hessian的一个变种,也是一个轻量级的RPC协议。它使用XML而非Hessian的二进制格式进行序列化,可能在某些场景下更便于跨平台交互。...

    5ucms移动端插件(手机版) v1.0

    一个很简单的移动端例子,需要跟多功能的可以二次开发下。此版本为是动态版,没写生成静态。文件目录说明:/plus/A_Qimweb/ ------ 插件管理目录/m/ ------ 移动页面目录/m/css/ ------ 移动样式目录/m/template/...

    易语言IDE美化插件支持库源码

    后来发现精易的易语言插件有一些便捷功能,闲着有空,我也用OD分析了下易语言(这算不算违规).找了点想要的功能.1.一键编译 //点了编译直接就等着编译完成,不用每次都要输入目标文件名或者点确定了.2.改回老版本代码...

Global site tag (gtag.js) - Google Analytics