常见的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，单基本实用与主流浏览器，希望朋友们多多测试！欢迎你的各种建议！