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

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

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

上下方向:
闲着无聊做一个jquery图片滚动插件_第1张图片
引入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>
	


左右方向:
闲着无聊做一个jquery图片滚动插件_第2张图片
引入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>

你可能感兴趣的:(java,jquery,css,ITeye)