JS小插件之2——cycle元素轮播

浏览数：55 / 时间：2015年06月09日

元素轮播效果是页面中经常会使用的一种效果。这个例子实现了通过元素的隐藏和显示来表现轮播效果。效果比较简单。

效果图如下：

源代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
  5 <title> cycle demo </title>
  6 <meta name="author" content="rainna" />
  7 <meta name="keywords" content="rainna‘s js lib" />
  8 <meta name="description" content="cycle demo" />
  9 </head>
 10 <style>
 11 *{margin:0;padding:0;}
 12 li{list-style:none;}
 13 
 14 .cycleBox{position:relative;width:600px;height:450px;margin:100px auto;}
 15 .cycleBox .elemsWrap li,.cycleBox .elemsWrap img{position:absolute;left:0;top:0;width:100%;height:100%;}
 16 .cycleBox .iconsWrap{position:absolute;right:15px;bottom:15px;}
 17 .cycleBox .iconsWrap li{display:inline-block;margin:0 0 0 10px;cursor:pointer;color:#fff;}
 18 
 19 .cycleBox .elemsWrap li{display:none;}
 20 </style>
 21 <body>
 22 <div class="cycleBox" id="cycleWrap">
 23     <ul class="elemsWrap" id="elemsWrap">
 24         <li>
 25             <div class="pic"><img src="http://img.itc.cn/focushome/73/16/73165df750e44c8943d40d2ebe67965d.jpg"></div>
 26             <div class="txt">小两口的95平米简约婚房</div>
 27         </li>
 28         <li>
 29             <div class="pic"><img src="http://img.itc.cn/focushome/b5/0a/b50abd5a46cedbf4dd8525fd9e0fcb69.jpg"></div>
 30             <div class="txt">本案是一套建筑面积95平米的两室小户型。</div>
 31         </li>
 32         <li>
 33             <div class="pic"><img src="http://img.itc.cn/focushome/e4/48/e4484905e23b45df40acddaa13b68d44.jpg"></div>
 34             <div class="txt">在色彩的搭配上以低饱和度的浅咖色为主搭配少量的黑色与白色来增加层次，最后配以高饱和度的装饰画作为跳色。</div>
 35         </li>
 36         <li>
 37             <div class="pic"><img src="http://img.itc.cn/focushome/1e/de/1edea51b5420795665ab3e8bffb9ed25.jpg"></div>
 38             <div class="txt">加强空间的储纳功能以及生活功能分区鬼鬼在靠近客厅窗口的地方设计了一个储纳地台以及整体衣柜。</div>
 39         </li>
 40         <li>
 41             <div class="pic"><img src="http://img.itc.cn/focushome/3b/2f/3b2f3bd3d320f27b0007aa9379ced6cc.jpg"></div>
 42             <div class="txt">小两口的95平米简约婚房</div>
 43         </li>
 44     </ul>
 45     <ul class="iconsWrap" id="iconsWrap"></ul>
 46 </div>
 47 
 48 <script>
 49 var cycle = function(){
 50     //公共函数
 51     function T$(id){
 52         return document.getElementById(id);
 53     }
 54     function T$$(root,tag){
 55         return (root||document).getElementsByTagName(tag);
 56     }
 57     function $extend(object1,object2){
 58         for(var p in object2){
 59             object1[p] = object2[p];
 60         }
 61         return object1;
 62     }
 63     
 64     //默认参数
 65     var defaultOptions = {
 66         index:0,           //第一个显示元素的索引，默认为0，显示第一个元素
 67         time: 1000      //切换时间     
 68     };
 69     
 70     //主类函数   cid为轮播总容器ID,eid为元素容器ID,iid为icons容器ID,options为重写的默认参数对象
 71     var cycleShow = function(cid,eid,iid,options){
 72         var self = this;
 73         if(!(self instanceof cycleShow)){
 74             return new cycleShow(eid,iid,options);
 75         }        
 76         self.container = T$(cid); 
 77         self.elemsContainer = T$(eid);     
 78         self.iconsContainer = T$(iid);
 79         self.options = $extend(defaultOptions,options||{});
 80         self.elems = T$$(self.elemsContainer,‘li‘);
 81     };
 82     cycleShow.prototype = {
 83         constructor: cycleShow,
 84         moveTo: function(currIndex){
 85             var self = this;
 86             currIndex = currIndex%self.elems.length;
 87             if(!self.currIndex) self.currIndex = 0;
 88             self.elems[self.currIndex].style.display = ‘none‘;
 89             self.icons[self.currIndex].style.color = ‘#fff‘;
 90             self.elems[currIndex].style.display = ‘block‘;    
 91             self.icons[currIndex].style.color = ‘#f00‘;
 92             self.currIndex = currIndex;
 93         },
 94         run: function(currIndex){
 95             var self = this;
 96             if(!!self.timer) clearTimeout(self.timer);
 97             self.timer = setTimeout(function(){
 98                 self.run(currIndex);
 99             },self.options.time);
100 
101             self.moveTo(currIndex++);
102         },
103         stop:function(){
104             var self = this;
105             if(!!self.timer) clearTimeout(self.timer);
106         },
107         init:function(){
108             var self = this,
109                 frag = document.createDocumentFragment();
110             for(var i=0,l=self.elems.length;i<l;i++){
111                 var node = document.createElement(‘li‘);
112                 node.innerHTML = i+1;
113                 frag.appendChild(node);
114             }
115             self.iconsContainer.appendChild(frag);
116             
117             self.icons = T$$(self.iconsContainer,‘li‘);
118             for(var i=0,l=self.icons.length;i<l;i++){
119                 (function(i){
120                     self.icons[i].onclick = function(){
121                         self.stop();
122                         self.moveTo(i);
123                     };
124                 }(i));
125             }
126             
127             self.container.onmouseover = function(){            
128                 self.stop();
129             }
130             self.container.onmouseout = function(){
131                 self.run(self.currIndex);
132             }
133             
134             self.run(self.options.index);
135         }
136     };
137     
138     return {
139         onShowCycle:function(cid,eid,iid,options){
140             var st = new cycleShow(cid,eid,iid,options);
141             st.init();
142         }
143     }
144     
145 }();
146 
147 cycle.onShowCycle(‘cycleWrap‘,‘elemsWrap‘,‘iconsWrap‘);
148 </script>
149 </body>
150 </html>