常见的js图片或内轮换效果

CSS:

.CommentCustom{ height:210px; margin:30px 0;}
.CommentCustom .scrollWrap{ position:relative; height:170px;}
.CommentCustom .scrollWrap span.btn{ position:absolute; cursor:pointer; display:block; width:10px; height:122px; background:url(../images/cssPos/custom_last_bg.jpg) no-repeat left top;}
.CommentCustom .scrollWrap span.btnLeft{ left:0; top:0; background-position:left top;}
.CommentCustom .scrollWrap span.btnLeft:hover{ background-position:left -123px;}
.CommentCustom .scrollWrap span.btnRight{ right:0; top:0; background-position:-10px top;}
.CommentCustom .scrollWrap span.btnRight:hover{ background-position:-10px -123px;}
.CommentCustom .scrollWrap .scrollMain{ position:relative;z-index:1;width:930px; height:170px; margin:0 auto; overflow:hidden;}
.CommentCustom .scrollWrap .scrollMain ol{ position:absolute; left:0; top:0;}
.CommentCustom .scrollWrap .scrollMain ol li{height:170px; float:left; width:930px;}
.CommentCustom .btnItem{ width:80px; margin:0 auto; margin-top:10px;}
.CommentCustom .btnItem li{ float:left;_display:inline; margin:0 3px;width:20px; height:20px; cursor:pointer; text-align:center; line-height:20px; font-weight:bold; color:#fff; background:url(../images/cssPos/custom_last_bg.jpg) no-repeat -40px -82px;}
.CommentCustom .btnItem li.selected{ background-position:-20px -82px;}

DOM：

<div class="CommentCustom" data-param='{
                                                "mouseType":"click",
                                                "slideType":"dirLeft",
                                                "speed":"normal",
                                                "easing":"easeInExpo"
                                                }'>
            <div class="scrollWrap">
                <span class="btn btnLeft"></span>
                <span class="btn btnRight"></span>
                <div class="scrollMain">
                    <ol class="clearfix">
                        <li><img src="images/c1.jpg" /></li>
                        <li><img src="images/c2.jpg" /></li>
                        <li><img src="images/c1.jpg" /></li>
                        <li><img src="images/c2.jpg" /></li>
                        <li><img src="images/c1.jpg" /></li>
                        <li><img src="images/c2.jpg" /></li>
                    </ol>
                </div>
            </div>
            <ul class="btnItem clearfix">
                <li class="selected">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>

JS:

function CustomComment(obj){
        /**
        @mouseType:[mouseover||click]  执行幻灯片的鼠标事件
        @slideType:[scrollLeft||scrollTop||dirLeft||dirTop||fadeIn]  幻灯片的效果
        @speed:[fast||normal||sleew||5]
        @easing:["def"||"easeInQuad"||"easeOutQuad"||"easeInOutQuad"||"easeInCubic"||
             "easeOutCubic"||"easeInOutCubic"||"easeInQuart"||"easeOutQuart"||
             "easeInOutQuart"||"easeInQuint"||"easeOutQuint"||"easeInOutQuint"||
             "easeInSine"||"easeOutSine"||"easeInOutSine"||"easeInExpo"||
             "*easeOutExpo"||"*easeInOutExpo"||"easeInCirc"||"easeOutCirc"||"easeInOutCirc"||
             "easeInElastic"||"easeOutElastic"||"easeInOutElastic"||"easeInBack"||"easeOutBack"||
             "easeInOutBack"||"easeInBounce"||"easeOutBounce"||"easeInOutBounce"]          幻灯片执行的动画方式
        @autoPlay:"true,5"  自动播放的时间
        
        */
        this.CustomComment=$(obj);//保存一个幻灯片
        this.scroll=$("ol",this.CustomComment);//保存幻灯片对象
        this.scrollMainWidth=this.scroll.children().eq(0).width();
        this.scrollMainHeight=this.scroll.children().eq(0).height();
        this.scrollWrap=$(".scrollWrap",this.CustomComment);
        this.btnItems=$(".btnItem li",this.CustomComment);//保存按钮序列
        this.btnLeft=$(".btnLeft",this.CustomComment);//保存左边的按钮
        this.btnRight=$(".btnRight",this.CustomComment);//保存右边的按钮
        this.data=$.parseJSON(this.CustomComment.attr("data-param"));//保存幻灯片参数
        this.data.mouseType=this.data.mouseType||"mouseover";//初始化鼠标默认事件
        this.data.slideType=this.data.slideType||"scrollLeft";//初始化幻灯片样式
        this.data.speed=Number(this.data.speed)*1000||this.data.speed||"normal";//初始化执行幻灯片的时间
        this.data.autoPlay=this.data.autoPlay||false;//初始化自动执行
        this.btnItems.parent().width(this.btnItems.length*26+"px");
        if(this.data.slideType=="scrollLeft"){
            this.scroll.width(this.scrollMainWidth*this.scroll.children("li").length+"px");
            }else if(this.data.slideType=="scrollTop"){
                this.scroll.children().css("float","none");
                }else if(this.data.slideType=="dirLeft"||this.data.slideType=="dirRight"||this.data.slideType=="dirTop"||this.data.slideType=="dirBootom"){
                    this.def=0;
                    this.scroll.children("li").css({
                                               float:"none",
                                               position:"absolute",
                                               display:"none"
                                               }).eq(0).show();;
                    };
        var _this_=this;
        this.t=null;
        this.loop=0;
        this.btnItems.bind(this.data.mouseType,function(){
                                                var i=$(this).index();
                                                _this_.loop=i;
                                                switch(_this_.data.slideType){
                                                    case "scrollLeft":
                                                            _this_.scrollLeft(i);
                                                            break;
                                                    case "scrollTop":
                                                            _this_.scrollTop(i);
                                                            break;
                                                    case "fadeIn":
                                                            _this_.fadeIn(i);
                                                            break;
                                                    case "dirLeft":
                                                            if(i>_this_.def){
                                                                _this_.dirLeft(i);
                                                                _this_.def=i;
                                                                }else if(i<_this_.def){
                                                                    _this_.dirRight(i);
                                                                    _this_.def=i;
                                                                    };
                                                            break;
                                                    case "dirTop":
                                                            if(i>_this_.def){
                                                                    _this_.dirTop(i);
                                                                    _this_.def=i;
                                                                }else if(i<_this_.def){
                                                                    _this_.dirBottom(i);
                                                                    _this_.def=i;
                                                                    };
                                                            break;
                                                    default:
                                                            _this_.fadeIn(i);
                                                    };
                                                });
        this.btnLeft.click(function(){
                                    _this_.loop--;
                                    if(this.loop<0||_this_.loop<-_this_.btnItems.length){
                                        _this_.loop=_this_.btnItems.length-1;
                                        };
                                    _this_.btnItems.eq(_this_.loop).trigger(_this_.data.mouseType);
                                });
        this.btnRight.click(function(){
                                    _this_.loop++;
                                    if(_this_.loop>=_this_.btnItems.length){
                                        _this_.loop=0;
                                        };
                                    _this_.btnItems.eq(_this_.loop).trigger(_this_.data.mouseType);        
                                });
        if(this.data.autoPlay[0]){//设置是否自动播放
            this.autoPlay();
            this.scrollWrap.mouseover(function(){window.clearInterval(_this_.t);}).mouseout(function(){_this_.autoPlay();});
            };
        };
    CustomComment.prototype={
        scrollLeft:function(i){
                this.scroll.stop().animate({left:-i*this.scrollMainWidth+"px"},this.data.speed,this.data.easing||"swing");
                this.btnItems.eq(i).addClass("selected").siblings().removeClass("selected");
            },
        scrollTop:function(i){
                this.scroll.stop().animate({top:-i*this.scrollMainHeight+"px"},this.data.speed,this.data.easing||"swing");
                this.btnItems.eq(i).addClass("selected").siblings().removeClass("selected");
            },
        fadeIn:function(i){
                this.scroll.children("li").hide().eq(i).fadeIn(this.data.speed,this.data.easing||"swing");
                this.btnItems.eq(i).addClass("selected").siblings().removeClass("selected");
            },
        dirLeft:function(i){
                var _this_=this;
                if(this.btnItems.eq(i).is(".selected")){return;}
                this.scroll.children("li").eq(i).css({
                                                     left:this.scrollMainWidth+"px",
                                                     display:"block"
                                                     });
                this.scroll.animate({left:-this.scrollMainWidth+"px"},this.data.speed,this.data.easing||"swing",function(){
                                                                                               $(this).css("left",0);
                                                                                              _this_.scroll.children("li").eq(i).css("left",0).siblings().hide();
                                                                                               });
                this.btnItems.eq(i).addClass("selected").siblings().removeClass("selected");
            
            },    
        dirRight:function(i){
                var _this_=this;
                if(this.btnItems.eq(i).is(".selected")){return;}
                this.scroll.children("li").eq(i).css({
                                                     left:-this.scrollMainWidth+"px",
                                                     display:"block"
                                                     });
                this.scroll.animate({left:this.scrollMainWidth+"px"},this.data.speed,this.data.easing||"swing",function(){
                                                                                               $(this).css("left",0);
                                                                                              _this_.scroll.children("li").eq(i).css("left",0).siblings().hide();
                                                                                               });
                this.btnItems.eq(i).addClass("selected").siblings().removeClass("selected");
            },
        dirTop:function(i){
                var _this_=this;
                if(this.btnItems.eq(i).is(".selected")){return;}
                this.scroll.children("li").eq(i).css({
                                                     top:this.scrollMainHeight+"px",
                                                     display:"block"
                                                     });
                this.scroll.animate({top:-this.scrollMainHeight+"px"},this.data.speed,this.data.easing||"swing",function(){
                                                                                               $(this).css("top",0);
                                                                                              _this_.scroll.children("li").eq(i).css("top",0).siblings().hide();
                                                                                               });
                this.btnItems.eq(i).addClass("selected").siblings().removeClass("selected");
            },
        dirBottom:function(i){
                var _this_=this;
                if(this.btnItems.eq(i).is(".selected")){return;}
                this.scroll.children("li").eq(i).css({
                                                     top:-this.scrollMainHeight+"px",
                                                     display:"block"
                                                     });
                this.scroll.animate({top:this.scrollMainHeight+"px"},this.data.speed,this.data.easing||"swing",function(){
                                                                                               $(this).css("top",0);
                                                                                              _this_.scroll.children("li").eq(i).css("top",0).siblings().hide();
                                                                                               });
                this.btnItems.eq(i).addClass("selected").siblings().removeClass("selected");
            },
        autoPlay:function(){
                var _this_=this;
            this.t=window.setInterval(function(){
                                               _this_.btnRight.click();
                                               },Number(this.data.autoPlay[1])*1000);
            }
        };
    CustomComment.init=function(CustomComments){
            var _this=this;
            CustomComments.each(function(){
                                  new _this(this);
                                  });
        };

此插件调用方式，模仿淘宝给各个商家提供的插件，直接在dom结构中传参数调用。此插件可配合easing.js动画缓动插件传参数实现丰富的效果！

注释：

本人在开发过程中，难免会出现各种bug，单基本实用与主流浏览器，希望朋友们多多测试！欢迎你的各种建议！