他山之石---ImageSlider

最新推荐文章于 2024-09-12 10:20:25 发布

holdmydream

最新推荐文章于 2024-09-12 10:20:25 发布

阅读量117

点赞数

分类专栏： J2EE 文章标签： ITeye HTML

J2EE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

上周闲逛看见此贴http://www.iteye.com/topic/986779?page=2#2030186，楼主向我们展示了他玩JS玩得有多遛。本着学习的原则研究了一下，发现思路大有可取之处，于是根据楼主的原理打造成了 ImageSlider0.5。

首先来关注一下使用方法：



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My ImageSlider</title>


<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript" src="imageSlider.js"></script>
<script type="text/javascript">

var slider;
$(document).ready(function(){

	slider = new ImageSlider(400,300);	
	//加一张图片
	slider.add("images/car4.jpg");

	//批量加图片 images目录下有 car1-car4 四张图片 
	slider.batchAdd({baseDir:"images",prefix:"car",begin:1,end:4});

	slider.renderTo('slider');
}
)

</script>
  </head>

  <body>
   	<div id="slider">

	</div>
	<input type="button" onclick="slider.next()" value="next"></input>
  </body>
</html>