轮播图的实现（带详细注释）

这是刚刚接触JQuery时拿来练练手写的，光学不动手是不行的。因为刚接触JQuery，对它的很多方法还不熟悉，所以参考一些了网上别人写的代码，自己边学边总结，因为在写这个的时候查了不少资料，本人也是那种喜欢多写注释的人，所以代码里注释比较多，思路应该算法比较清晰，适合新手看懂，我也尽量用简短的代码来实现，欢迎指出不足的地方。

以下是代码部分（注意引入JQ文件）

index.html

<script type="text/javascript">$(document).ready(function(){$.focus("#focus001");   //轮播效果的启动方法 #focus001是字符串 });</script>  <!--轮播图的代码-->           <div class="focus" id="focus001">    <ul>        <li><a ><img src="./images/02.jpg"  alt=""  style="width: 500px; height: 300px;" /></a></li>        <li><a ><img src="./images/01.jpg"  alt=""  style="width: 500px; height: 300px;"/></a> </li>        <li><a ><img src="./images/03.jpg"  alt="" style="width: 500px; height: 300px;" /></a> </li>    </ul></div>      <!--轮播图的代码--> 

css

div{ border:solid 1px red; }#focus001 {   overflow:hidden;    /* 这里很关键*/   position:relative;   left:400px;   /*这里使整体向右移动了400px*/   height: 300px;   width: 500px;<pre name="code" class="css">}#focus001 ul { position:relative;/*width: 1500px; ul的width在这里不需要设置，因为在sl.js中动态设置了 ，这样就算由现在的3张图片轮播改成4张，这里的css样式也不用动*/ /*left:-500px; 通过改变ul的left属性来达到轮播的效果 */ }#focus001 ul li {list-style-type:none;float: left; width: 500px;height: 300px;}.btn {position:absolute; width:100px; height:30px;left: 200px;top: 270px;}.focus .btn span{display:inline-block;padding-left: 5px;margin-left: 5px;padding-right: 5px; font-size:23px;height:24px; line-height:24px; text-align:center;background:#fff;cursor:pointer;/*鼠标指针变成 手 的形状*/}.focus .btn span.on {background:#fff;} .preNext {width:45px; height:100px; position:absolute; top:90px;cursor:pointer;/*鼠标指针变成 手 的形状*/}.focus .pre {left:0;} /*看需求再添背景*/.focus .next {right:0;}

sl.js

$(function(){$.focus= function(slid) {   //focus是自定义的方法   slid是字符串变量 slid在这里就是index.html里面的 #focus001    var sWidth = $(slid).width(); //获取焦点图的宽度（显示面积）var len = $(slid).find("ul li").length; //获取焦点图个数var index = 0;      //代表当前显示图片的索引var picTimer;        //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度$(slid+" ul").css("width",sWidth * (len));//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮var btn = "</div><div class='btn'>";for(var i=0; i < len; i++) {var ii = i+1;btn += "<span>"+ii+"</span>";}btn += "</div><div class='preNext pre'>上一页</div><div class='preNext next'>下一页</div>";$(slid).append(btn);      //为小按钮添加鼠标滑入事件，以显示相应的内容$(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {index = $(slid+" .btn span").index(this);   //index（集合） 返回一个数字索引 表示是第几个  showPics(index);}).eq(0).trigger("mouseenter");  //注意这里的.eq(0).trigger("mouseenter")是为了在一刷新页面时第一个按钮背景显示为白色      //上一页、下一页按钮透明度处理$(slid+" .preNext").css("opacity",0.2).hover(function() {$(this).stop(true,false).animate({"opacity":"0.5"},300);},function() {$(this).stop(true,false).animate({"opacity":"0.2"},300);}); //上一页按钮    注意索引是从0开始的$(slid+" .pre").click(function() {index -= 1;if(index == -1) {index = len - 1;}showPics(index);});//下一页按钮$(slid+" .next").click(function() {index += 1;if(index == len) {index = 0;}showPics(index);});//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放$(slid).hover(function() {clearInterval(picTimer);  },function() {picTimer = setInterval(function() {  showPics(index);index++;if(index == len) {index = 0;}},2500); //此2500代表自动播放的间隔，单位：毫秒}).trigger("mouseleave");  //  .trigger("mouseleave")是执行 离开时触发的事件/*setInterval()是JS里面的方法setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。*/             //显示图片函数，根据接收的index值显示相应的内容function showPics(index) { //普通切换var nowLeft = -index*sWidth; //根据index值计算ul元素的left值$(slid+" ul").stop(true,false).animate({"left":nowLeft},1000); //通过animate()调整ul元素滚动到计算出的position$(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},1000).eq(index).stop(true,false).animate({"opacity":"1"},1000); //为当前的按钮切换到选中的效果      //每次切换前都将所有按钮的opacity属性设置为0.4，然后当前的那个就设置为1         //每次使用animate()前最好清空动画序列}   };});