Jquery插件我来实现之滑动幻灯片一（转自buhutuu.cn）

最近在研究GAE
，所以jquery这边就没怎么更新。

这些天在工作里需要用到幻灯片效果，所以就用了我在buhutuu首页
中用的那个jquery插件。这个插件还是相当好用的，不过我要在好几个页面里面用到，偏偏宽度高度都不太一致，所以这个插件的问题也就暴露了，开放性并不是很好。

我决定，自己写一个jquery插件，将宽度和高度都作成自定义的，这样功能在js里实现，而样式则在网页里各自定义。

要做这样一个jquery插件，首先得做好div结构，我是这样写的：

<div style="width:300px">
<div id="control-bar">
<ul id="slides-control">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="slide-rongqi">
<div id="slides">
<div class="slide"><img src="images/1.jpg" mce_src="images/1.jpg" /></div>
<div class="slide"><img src="images/2.jpg" mce_src="images/2.jpg" /></div>
<div class="slide"><img src="images/3.jpg" mce_src="images/3.jpg" /></div>
</div>
</div>
</div>

样式则是这样定义：

#control-bar{float:left; width:300px;}
#slides-control{list-style:none}
#slides-control li{float:left; margin-right:20px;}
#slide-rongqi{overflow:hidden; width:300px; height:200px; float:left;}
#slides{width:1000px; position:relative;}
.slide{width:300px; float:left; height:100px;}

slide-rongqi div下包括了宽度1000px的slides div，它的style里设置了overflow属性，让div中超出宽度的内容隐藏，然后我们控制slides的位置就可以达到滑动slide的效果。

js代码如下：

<mce:script language="javascript" type="text/javascript"><!--
$("li").click(function(){
//给li绑定函数，如果网页里只有这一处有li，自然能这么写，否则的话，最好还是写的详细点
i=$("#slides-control li").index(this)*300;
//这是很有用的，找出这个元素在相同元素序列中的位置，然后乘以div的宽度，就可以知道需要移动的位置			$("#slides").animate({left:"-"+i+"px"},1000);
//用这个函数让slides  div用1000毫秒移动到规定的位置
});
// --></mce:script>

请看效果和全部源代码