JQ_简单版图像点击切换(不是无缝)

 

/*css*/

.site{width:800px;margin:0 auto;padding-top:50px;}
.pro{height:200px;overflow:hidden;width:600px;margin:0 auto; position:relative;}
.pro ul{width:6000px;position:absolute;left:0;}
.pro li{float:left;font-size:0;}
.button{height:100px;}
.button p{text-align:center;line-height:100px;font-size:20px;}
.button b:hover{cursor:pointer;}
.button b.hide{visibility:hidden;}

/*jq*/

var imgClick = function(a){
    this.option=a;
    this.base();
    }
imgClick.prototype = {
    base: function(){
        var butle = $(this.option.imgCle);
        var butri = $(this.option.imgCri);
        var proul = $(this.option.imgRun);
        var fazhi = this.option.fazhi || 0;
        var dire  = this.option.dire || "left";
        switch(dire){
            case "left" : var liW = proul.find("li").eq(0).outerWidth(true);
                          var ulW = liW * proul.find("li").length;
                          var ulwP = proul.parent().width();
            break;
            case "top" : var liW = proul.find("li").eq(0).outerHeight(true);
                         var ulW = liW * proul.find("li").length;
                         var ulwP = proul.parent().height();
            break;
            }
        var x = ulW - ulwP - fazhi;
        var juli = 0;
        butle.click(function(){
            if(juli < 0 && !proul.is(":animated")){
                juli = juli + liW;
                switch(dire){
                    case "left" : proul.animate({left:juli},200);break;
                    case "top" : proul.animate({top:juli},200);break;
                    }
                }
            });
        butri.click(function(){
            if(juli>-x && !proul.is(":animated")){
                juli = juli - liW;
                switch(dire){
                    case "left" : proul.animate({left:juli},200);break;
                    case "top" : proul.animate({top:juli},200);break;
                    }
                };
            });
        }
    }
new imgClick({
    imgRun     : "#imgShow",
    imgCle     : "#left",
    imgCri     : "#right",
    fazhi    : 20,
    dire    : "left"
    });

/*html*/

<div class="site">
 <div class="pro">
 <ul id="imgshow">
   <li><img src="images/i01.jpg" /></li>
   <li><img src="images/i02.jpg" /></li>
   <li><img src="images/i03.jpg" /></li>
   <li><img src="images/i04.jpg" /></li>
   <li><img src="images/i05.jpg" /></li>
   <li><img src="images/i06.jpg" /></li>   
 </ul>
 </div>
 <div class="button">
 <p><b class="left" id="left">&laquo;</b>&nbsp;<b class="right" id="right">&raquo;</b></p>
 </div>
</div>