一個焦點圖插件

1、HTML代碼結構以下，記得引用jquery庫

<div class="wrap">
        <a class="left" id="left"></a>
        <a class="right"></a>
        <div class="box">
            <ul>
                <li><img src="img/banner1.jpg" width="300" height="300"/></li>
                <li><img src="img/banner2.jpg" width="300" height="300"/></li>
                <li><img src="img/banner3.jpg" width="300" height="300"/></li>
            </ul>
        </div>
    </div>

2、css代碼以下

.wrap{ width:800px; margin:0 auto; position: relative;}
.wrap .box{ width:300px; height:300px; margin:0 auto; overflow:hidden;}
.wrap .box ul{ display: block; position:relative; width:1800px; height: 300px;}
.wrap ul li{ float:left; width:300px;}
.wrap a{ display:block; position:absolute; top:50%; width:23px; height:42px; cursor:pointer; }
.wrap a.left{ left:0; background:url(../img/arrowl.png) no-repeat;}
.wrap a.right{ right:0; background:url(../img/arrowr.png) no-repeat; }

3、js代碼以下

$(function(){
    var count=0,    //記錄li的當前索引
        size = $(".box ul li").size(),      //獲取li的個數
        l_width = $(".box ul li").width();  //獲取li的寬度
        
        $(".box ul").append($(".box ul").html());    //將ul下的li在追加一遍

    /**右邊按鈕**/
    $(".wrap a.right").click(function(){
        count++;
        /**若是當前索引>li的個數，則使 left 歸零**/
        if(count>=size){    
            $(".box ul").animate({"left":(-count*l_width)+"px"},function(){
                $(".box ul").css("left","0px");
            });
            count=0;    //重置 索引爲0
        }else{
            $(".box ul").animate({"left":(-count*l_width)+"px"},500);
        }
    })
    /**左邊按鈕**/
    //讓第一個ul與第二個ul 的 index 對應
    $(".wrap a.left").click(function(){
        count--
        /**若是當前索引<0，則使 left 等於 第二個ul的第一個li的位置 第一張圖片**/
        if(count<0){    
            $(".box ul").css("left",-size*l_width);      //改變ul的left值
            $(".box ul").animate({"left":(-(size-1)*l_width)+"px"},500);  
            //設置 count 等於 第一個ul 對應的index            
            count = size-1;          
        }else{
            $(".box ul").animate({"left":(-count*l_width)+"px"},500)
        }
    })    
})

注：還能夠用css3 tranform來實現：固然IE6~8不支持，下次在寫上吧！

結果以下：