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>

请看效果和全部源代码