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