jquery插件 - imageScroller

最新推荐文章于 2024-09-20 16:06:21 发布

larance

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量1.1k

点赞数

分类专栏： JS && CSS HTML 文章标签： jquery插件 border xhtml function float html

JS && CSS 同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

HTML

21 篇文章 0 订阅

订阅专栏

效果还不错，值得使用。

演示：

http://cssrain.cn/demo/jQuery-imageScroller/imageScroller.html

下载：

http://cssrain.cn/demo/jQuery-imageScroller/imageScroller.rar

本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=1301

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.imageScroller.js"></script>

<style type="text/css">

#viewer {height:100px; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}

#viewerFrame {width:505px; clear:both; padding:0;}

#viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}

#viewer a {display:block; float:left; width:100px; height:100px;}

</style>                        

<script type="text/javascript">

	$(function(){	

		$("#viewer").imageScroller({

			next:"btn1",

			prev:"btn2",

			frame:"viewerFrame",

			width:100,

			child: "a",

			auto: true

		});	 

	});

</script>

</head>

<body>

<div id="viewer">

	 <div id="viewerFrame">

      <a href=""><img src="http://cssrain.cn/demo/jQuery-imageScroller/img/pre1.jpg"></a>

      <a href=""><img src="http://cssrain.cn/demo/jQuery-imageScroller/img/pre2.jpg"></a>

      <a href=""><img src="http://cssrain.cn/demo/jQuery-imageScroller/img/pre3.jpg"></a>

      <a href=""><img src="http://cssrain.cn/demo/jQuery-imageScroller/img/pre4.jpg"></a>

      <a href=""><img src="http://cssrain.cn/demo/jQuery-imageScroller/img/pre5.jpg"></a>

	 </div>

</div>

<span id="btn1">向前</span>

<br/>

<span id="btn2">向后</span>

</body>

</html>