仿着写的一个jquery的图片切换小插件，代码如下：
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } ul,li{ list-style:none; } .cl{ zoom:1; } .cl:after{ display:block; content:""; width:0; height:0; clear:both; overflow:hidden; } .myDiv{ height:300px; } .myDiv li{ float:left; width:100%; height:300px; line-height:300px; text-align:center; } .myDiv img{ max-height:300px; } </style> </head> <body> <div class="myDiv cl"> <ul> <li class="js-switch-item"><a href="#"><img data-src="1.jpg" src="load.gif"></a></li> <li class="js-switch-item"><a href="#"><img data-src="2.jpg" src="load.gif"></a></li> <li class="js-switch-item"><a href="#"><img data-src="3.jpg" src="load.gif"></a></li> <li class="js-switch-item"><a href="#"><img data-src="4.jpg" src="load.gif"></a></li> </ul> </div> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/lunhuan.js"></script> <script> $(".myDiv").switchFun(); </script> </body> </html>
js:
;(function($){ $.extend({ addStyle: function(cssText){ var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode(cssText)); }catch(ex){ style.styleSheet.cssText = cssText; } document.getElementsByTagName("head")[0].appendChild(style); } }); $.fn.switchFun = function(obj,fun){ if((typeof obj).toLowerCase() === "function"){ fun = obj; obj = {}; } var opt = $.extend({ cont: "js-switch-item", active: "active",//高亮class auto: true, //是否自动 openNext: true,//是否开启上一个、下一个 events: "mouseenter",//触发事件 index: 0, //默认显示值 navClass: "",//导航class navCss: "",//导航样式 navChildCss: "", //导航内部样式 init: null,//初始化 times: 3000,//延时时间 setFun: null }, obj || {}); var $this = this; var items = $this.find("."+opt.cont); var itemsLen = items.length; var nav,next,prev;//节点 var addActive = function(inx){//设置当前样式、显示 if(inx >= itemsLen){ inx = 0; } if(inx < 0){ inx = itemsLen-1; } var itemCur = items.eq(inx); var imgDom = itemCur.find("img"); if(imgDom.data("src")){//加载图片 imgDom.prop("src",imgDom.data("src")); imgDom.removeData("src"); } items.fadeOut(500); itemCur.fadeIn(500); nav.removeClass(opt.active).eq(inx).addClass(opt.active);
opt.index = inx; } opt.init = function(){//初始化 var tw = $this.width()||items.width()+"px"; var th = $this.height()||items.height()+"px"; var navHtml = ""; var activeClass = ""; $this.css({"position":"relative","width":tw,"height":th}); for(var i=0; i<itemsLen; i++){ navHtml = navHtml + '<span></span>'; } items.css({"position":"absolute","left":0,"top":0,"z-index":1}); var navDom = $('<div class="js-switch-nav '+ opt.navClass +'"></div>').html(navHtml);//创建节点 var navStyle = ".js-switch-nav{ 100%; height:20px; position:absolute; left:0; bottom:20px; text-align:center;z-index:9; }.js-switch-nav span{ cursor:pointer; display:inline-block; height:5px; 20px; background-color:#ddd; margin:0 5px; }.js-switch-nav span.active{ background-color:#c00; }.handleDom{ background:rgba(0,0,0,0.6); display:inline-block; height:40px; line-height:40px; 35px; text-align:center; font-weight:bold; font-size:20px; font-family:serif,arial; color:#fff; cursor:pointer; position:absolute; z-index:99; text-decoration:none; top:50%; margin-top:-20px; display:none; }.js-preDom{ left:10%; }.js-nextDom{ right:10%; }.handleDom i{ position:absolute; display:inline-block; 100%; height:100%; top:0; left:0; background-color:#000; opacity:0.6; filter:alpha(opacity=60); z-index:-1; }"; $.addStyle(navStyle + opt.navCss + opt.navChildCss);//创建样式 $this.append(navDom); $this.append($('<a href="javascript:;" class="js-nextDom handleDom"><i></i>></a><a href="javascript:;" class="js-preDom handleDom"><i></i><</a>'));//创建上一个、下一个 nav = $this.find(".js-switch-nav span"); next = $this.find(".js-nextDom"); prev = $this.find(".js-preDom"); addActive(opt.index); } opt.init(); function _default(e){//阻止冒泡事件 try{ e.stopPrapagation(); }catch(ex){ window.event.cancleBubble = false; } } var autoFun = function(){ opt.setFun = setInterval(function(){ opt.index++; addActive(opt.index); if(fun){//返回函数 fun(items.eq(opt.index),nav.eq(opt.index),opt.index);//当前切换元素，当前导航元素，当前索引 } },opt.times); } $this.on("mouseenter",function(){ clearInterval(opt.setFun); next.show(); prev.show(); }).on("mouseleave",function(){ clearInterval(opt.setFun); autoFun(); next.hide(); prev.hide(); }); next.on("click",function(){//下一个 opt.index++; addActive(opt.index); }); prev.on("click",function(){//上一个 opt.index--; addActive(opt.index); }); nav.on(opt.events,function(e){ _default(e); var $t = $(this); var inx = $t.index(); clearInterval(opt.setFun); if(inx === opt.index){ return $this; } addActive(inx); opt.index = inx; }); if(opt.auto){ autoFun(); } return $this; } })(jQuery);