`
seyaa
  • 浏览: 54567 次
  • 性别: 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

    jquery+css3弹窗插件

    清明闲着没事,自己试着写了一个弹窗插件,感觉还是可以简单易用的。有bug之处,请指教!

    一个jquery的特效

    下午闲着没事做了一个简单的jquery特效,给大家分享下,共同学习,很简单的,就没有作注释,也是我自己练手的,仅供学习交流

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

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

    jquery-拼图游戏-拖拽

    昨日闲着做了个jquery的拼图游戏,简单明了,供大家娱乐

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

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

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

    NULL 博文链接:https://hejinxiqq.iteye.com/blog/990557

    闲着做了个菜单

    一个还可以的菜单。在 firefox 下 的子菜单位置 不正确。改改也能凑和着用。

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

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

    JavaScript仿网易选项卡制作代码

    今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式。 先来浏览一下效果图吧~~ 一、Javascript实现 1、html布局 &lt;span id=span_xinwen ...

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

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

    Jquery拖拽并简单保存的实现代码

    今闲着无聊 顺便看了下jquery ui的拖拽插件,实现拖拽的方法很简单,看到效果后兴奋小下...

    C#做的"闪烁时间",

    C#做的"闪烁时间",自己闲着无聊做的一个小东西,,,

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

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

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

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

    基于jquery实现九宫格拼图小游戏

    闲着无聊就用js简单写了一个。 游戏的玩法很简单。九宫格中有八个小图片。随机打乱之后,将八张小图片拼接成一个完整的图。 html代码 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;style...

    cocos2d-x泡泡龙例子

    基于cocos2d-x简单泡泡龙游戏开发的源码,最近闲着无聊做的一个

    调用DLL示例最新附加JNA

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

    CPU闲着就是闲着了?也是有任务的!.docx

    CPU闲着就是闲着了?也是有任务的!.docx

Global site tag (gtag.js) - Google Analytics