一个焦点图插件

一、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>

二、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; }

三、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不支持，下次在写上吧！

结果如下：