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

这是刚刚接触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()前最好清空动画序列
		}
   };

});