jquery实现简单的单张图片切换效果

[javascript]代码库

<style>
.slidePanel{

}
.sildeContainer{
    display:block;
    width:300px;
    height:300px;
    overflow: hidden;
}
.sildeContainer ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 5000px;
}
.sildeContainer ul li{
    float: left;
    width:300px;
    height:300px;
}
.sildeContainer ul li img{
    width: 300px;
    height:300px;
}
</style>

<div id="slidePanel" class="slidePanel">
<div class="sildeContainer">
<ul class="slideList">
<li><img src="images/1364791236f951.jpg"/></li>
<li><img src="images/136479026399c7.jpg"/></li>
<li><img src="images/13647951670de4.jpg"/></li>
<li><img src="images/136479616600ee.jpg"/></li>
<li><img src="images/1364795402308b.jpg"/></li>
<li><img src="images/1364791236f951.jpg"/></li>
<li><img src="images/13647982102730.jpg"/></li>
<li><img src="images/1364791236f951.jpg"/></li>
</ul>
</div>
<div class="sildeNav"><a href="javascript:;" class="J_slidePre">上一个</a><a href="javascript:;" class="J_sildeNext">下一个</a></div>
</div>
<script>
window.slide=(function(){
    function _scrollPanel(obj)
    {
        this.cur_index=0;
        this.offset=300;
        this.itemnum=0;
        this.target=null;
        this.target=obj.target;
        this._init();
    }
    _scrollPanel.prototype._init=function()
    {
        var _this=this;
        this.itemnum=$(".slideList li",_this.target).length;
        $(".J_slidePre",_this.target).click(function(){
            _this.cur_index=_this.cur_index>0?(_this.cur_index-1):(_this.itemnum-1);
            $(".slideList",_this.target).animate({
                marginLeft:-1*_this.cur_index*_this.offset
            },"normal");
        });
        $(".J_sildeNext",_this.target).click(function(){
            _this.cur_index=_this.cur_index<(_this.itemnum-1)?(_this.cur_index+1):0;
            $(".slideList",_this.target).animate({
                marginLeft:-1*(_this.cur_index)*_this.offset
            },"normal");
        });
    }
    return {
        scrollPanel:_scrollPanel
    }
})();
new window.slide.scrollPanel({target:$("#slidePanel")});
</script>