元素轮播效果是页面中经常会使用的一种效果。这个例子实现了通过元素的隐藏和显示来表现轮播效果。效果比较简单。
效果图如下：
源代码如下：
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>