脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS小插件之2――cycle元素轮播，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 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 <p class="cycleBox" id="cycleWrap">
23 <ul class="elemsWrap" id="elemsWrap">
24 <li>
25 <p class="pic"><img src=/uploaDFile/2014/0802/20140802091317155.jpg"></p>
26 <p class="txt">小两口的95平米简约婚房</p>
27 </li>
28 <li>
29 <p class="pic"><img src=/uploadfile/2014/0802/20140802091317197.jpg"></p>
30 <p class="txt">本案是一套建筑面积95平米的两室小户型。</p>
31 </li>
32 <li>
33 <p class="pic"><img src=/uploadfile/2014/0802/20140802091317857.jpg"></p>
34 <p class="txt">在色彩的搭配上以低饱和度的浅咖色为主搭配少量的黑色与白色来增加层次，最后配以高饱和度的装饰画作为跳色。</p>
35 </li>
36 <li>
37 <p class="pic"><img src=/uploadfile/2014/0802/20140802091317687.jpg"></p>
38 <p class="txt">加强空间的储纳功能以及生活功能分区鬼鬼在靠近客厅窗口的地方设计了一个储纳地台以及整体衣柜。</p>
39 </li>
40 <li>
41 <p class="pic"><img src=/uploadfile/2014/0802/20140802091317814.jpg"></p>
42 <p class="txt">小两口的95平米简约婚房</p>
43 </li>
44 </ul>
45 <ul class="iconsWrap" id="iconsWrap"></ul>
46 </p>
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 }
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>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JS小插件之2――cycle元素轮播全部内容，希望文章能够帮你解决javascript代码实例教程-JS小插件之2――cycle元素轮播所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。