今天项目需要用到旋转木马轮播功能，需要显示个可以切换的选项，这几个选项也许是图片，也许是文字，也许是一个iframe页面，也有可能是图文混排，还可能需要支持调用接口数据，需要显示多条信息，最少3条，最多不限，可能有10条，可能有10000条，于是就有了下面这个实现方法，看上去已经很完美了（样式和具体显示图片、文字或者是iframe页面、图文混排、调用接口数据等请自行在此实例基础上调试）
需要说明的是预先显示：2 1 9，是因为一共有9张图片，默认显示第一张在中间，往右是2，背后那张是3，不过背后那张无需进行设置。这是视觉初始的效果，可根据自己需要调整。
carrousel.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>旋转木马轮播</title> 6 <style type="text/css"> 7 html, body { 8 width: 100%; 9 height: 100%; 10 } 11 .carrousel .arrow_left { 12 background: #000; 13 left: 20px; 14 } 15 .carrousel .arrow_right { 16 background: #000; 17 right: 20px; 18 } 19 .carrousel .arrow_left, .carrousel .arrow_right { 20 position: absolute; 21 top: 50%; 22 width: 50px; 23 line-height: 50px; 24 height: 50px; 25 text-align: center; 26 color: #FFF; 27 cursor: pointer; 28 } 29 .carrousel .back { 30 z-index: 1; 31 opacity: 0.3; 32 margin: auto; 33 width: 10%; 34 height: 60px; 35 left: 45%; 36 } 37 .carrousel .left { 38 left: 10%; 39 } 40 .carrousel .right { 41 right: 10%; 42 } 43 .carrousel .left, .carrousel .right { 44 top: 53%; 45 width: 60px; 46 height: 60px; 47 z-index: 2; 48 opacity: 0.5; 49 } 50 .carrousel .front { 51 left: 45%; 52 top: 50%; 53 margin: auto; 54 width: 10%; 55 height: 100px; 56 z-index: 3; 57 opacity: 1; 58 } 59 .carrousel .front, .carrousel .right, .carrousel .back, .carrousel .left, .carrousel .content { 60 position: absolute; 61 background: #666; 62 text-align: center; 63 color: #FFF; 64 font-size: 20px; 65 } 66 .carrousel .content { 67 width: 100%; 68 top: 80%; 69 text-align: center; 70 color: #fff; 71 margin: auto; 72 } 73 </style> 74 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script> 75 <script type="text/javascript"> 76 //页面加载完成后 77 $(document).ready(function(e) { 78 79 //复制一个旋转木马轮播 80 var a = carrousel; 81 82 //初始化 83 a.init($("#carrousel_a"), [ 84 ["1", "这是第一张图或内容", "1.jpg"], 85 ["2", "这是第二张图或内容", "2.jpg"], 86 ["3", "这是第三张图或内容", "3.jpg"], 87 ["4", "这是第四张图或内容", "4.jpg"], 88 ["5", "这是第五张图或内容", "5.jpg"], 89 ["6", "这是第六张图或内容", "6.jpg"], 90 ["7", "这是第七张图或内容", "7.jpg"], 91 ["8", "这是第八张图或内容", "8.jpg"], 92 ["9", "这是第九张图或内容", "9.jpg"] 93 ]); 94 95 //左边箭头点击 96 $("#carrousel_a .arrow_left").click(function() { 97 a.rotate("left"); 98 }); 99 100 //右边箭头点击 101 $("#carrousel_a .arrow_right").click(function() { 102 a.rotate("right"); 103 }); 104 105 }); 106 107 /** 108 * carrousel.js - v1.0.0 (2016-11-5) 109 * 110 * 旋转木马轮播 111 * by tie. qq：2185987263 112 * 113 * Copyright (C) 2016, tie. 114 * All rights reserved. 115 * 116 **/ 117 118 var carrousel = { 119 120 //>3~n 121 data: [], 122 123 obj: null, 124 125 //初始化 126 data_count: 0, 127 init: function(obj, data) { 128 129 var self = this; 130 131 self.obj = obj; 132 self.data = data; 133 134 //左边图片计数器 135 self.left_img_count = self.data.length - 1; 136 137 //右边图片计数器 138 self.right_img_count = 2; 139 140 //数据计数器 141 self.data_count = 0; 142 143 //文字或图片 144 self.obj.find(".left").html(self.data[1][0]); 145 //car_back的top一定要是最大得 146 self.obj.find(".back").css({ 147 "top": self.obj.find(".left").offset().top + 1 148 }); 149 self.obj.find(".right").html(self.data[self.left_img_count][0][0]); 150 self.obj.find(".front").html(self.data[0][0]); 151 self.obj.find(".content").html(self.data[0][1]); 152 }, 153 154 //往左旋转 155 left_img_count: null, 156 left_img_up: function() { 157 158 var self = this; 159 160 self.left_img_count--; 161 if (self.left_img_count < 0) { 162 self.left_img_count = self.data.length - 1; 163 } 164 165 var t, id; 166 self.obj.find(".is_horse").each(function(i) { 167 if (i > 0) { 168 if ($(this).offset().top > t) { 169 id = $(this).attr("data-horse"); 170 t = $(this).offset().top; 171 } 172 } else { 173 id = $(this).attr("data-horse"); 174 t = $(this).offset().top; 175 } 176 }); 177 178 self.obj.find("." + id).html(self.data[self.left_img_count][0]); 179 if (self.left_img_count <= 0) { 180 self.left_img_count = self.data.length; 181 } 182 183 self.right_img_count--; 184 if (self.right_img_count <= 0) { 185 self.right_img_count = self.data.length; 186 } 187 188 self.show_content("left"); 189 190 }, 191 192 //往右旋转 193 right_img_count: null, 194 right_img_up: function() { 195 196 var self = this; 197 198 self.left_img_count++; 199 if (self.left_img_count >= self.data.length) { 200 self.left_img_count = 0; 201 } 202 if (self.right_img_count >= self.data.length) { 203 self.right_img_count = 0; 204 } 205 206 var t, id; 207 self.obj.find(".is_horse").each(function(i) { 208 if (i > 0) { 209 if ($(this).offset().top > t) { 210 id = $(this).attr("data-horse"); 211 t = $(this).offset().top; 212 } 213 } else { 214 id = $(this).attr("data-horse"); 215 t = $(this).offset().top; 216 } 217 }); 218 219 self.obj.find("." + id).html(self.data[self.right_img_count][0]); 220 221 self.right_img_count++; 222 223 self.show_content("right"); 224 }, 225 226 //显示内容 227 show_content: function(direction) { 228 229 var self = this; 230 231 if (direction == "left") { 232 self.data_count--; 233 if (self.data_count < 0) { 234 self.data_count = self.data.length - 1; 235 } 236 } 237 238 if (direction == "right") { 239 self.data_count++; 240 if (self.data_count >= self.data.length) { 241 self.data_count = 0; 242 } 243 } 244 245 self.obj.find(".content").animate({ 246 opacity: 0 247 }, 500, '', function() { 248 self.obj.find(".content").html(self.data[self.data_count][1]).animate({ 249 opacity: 1 250 }, 500); 251 }); 252 }, 253 254 //旋转 255 direction_lock: false, 256 rotate: function(direction) { 257 258 var self = this; 259 260 if (self.direction_lock) { 261 return false; 262 } 263 self.direction_lock = true; 264 265 var ol = self.obj.find(".left"), 266 ob = self.obj.find(".back"), 267 or = self.obj.find(".right"), 268 of = self.obj.find(".front"), 269 t1 = "opacity"; 270 t2 = "z-index"; 271 272 var l_l = ol.offset().left, 273 l_t = ol.offset().top, 274 l_w = ol.width(), 275 l_h = ol.height(), 276 l_o = ol.css(t1), 277 l_z = ol.css(t2), 278 279 r_l = or.offset().left, 280 r_t = or.offset().top, 281 r_w = or.width(), 282 r_h = or.height(), 283 r_o = or.css(t1), 284 r_z = or.css(t2), 285 286 b_l = ob.offset().left, 287 b_t = ob.offset().top, 288 b_w = ob.width(), 289 b_h = ob.height(), 290 b_o = ob.css(t1), 291 b_z = ob.css(t2), 292 293 f_l = of.offset().left, 294 f_t = of.offset().top, 295 f_w = of.width(), 296 f_h = of.height(), 297 f_o = of.css(t1), 298 f_z = of.css(t2); 299 300 var _l_l, _l_t, _l_w, _l_h, _r_l, _r_t, _r_w, _r_h, _b_l, _b_t, _b_w, _b_h, _f_l, _f_t, _f_w, _f_h; 301 302 if (direction == "left") { 303 self.left_img_up(); 304 _f_l = l_l, _f_t = l_t, _f_w = l_w, _f_h = l_h, _f_o = l_o, _f_z = l_z; 305 _b_l = r_l, _b_t = r_t, _b_w = r_w, _b_h = r_h, _b_o = r_o, _b_z = r_z; 306 _r_l = f_l, _r_t = f_t, _r_w = f_w, _r_h = f_h, _r_o = f_o, _r_z = f_z; 307 _l_l = b_l, _l_t = b_t, _l_w = b_w, _l_h = b_h, _l_o = b_o, _l_z = b_z; 308 } 309 if (direction == "right") { 310 self.right_img_up(); 311 _f_l = r_l, _f_t = r_t, _f_w = r_w, _f_h = r_h, _f_o = r_o, _f_z = r_z; 312 _b_l = l_l, _b_t = l_t, _b_w = l_w, _b_h = l_h, _b_o = l_o, _b_z = l_z; 313 _r_l = b_l, _r_t = b_t, _r_w = b_w, _r_h = b_h, _r_o = b_o, _r_z = b_z; 314 _l_l = f_l, _l_t = f_t, _l_w = f_w, _l_h = f_h, _l_o = f_o, _l_z = f_z; 315 } 316 ol.animate({ 317 width: _l_w, 318 height: _l_h, 319 left: _l_l, 320 top: _l_t, 321 opacity: _l_o, 322 zIndex: _l_z 323 }, 500); 324 ob.animate({ 325 width: _b_w, 326 height: _b_h, 327 left: _b_l, 328 top: _b_t, 329 opacity: _b_o, 330 zIndex: _b_z 331 }, 500); 332 or.animate({ 333 width: _r_w, 334 height: _r_h, 335 left: _r_l, 336 top: _r_t, 337 opacity: _r_o, 338 zIndex: _r_z 339 }, 500); 340 of.animate({ 341 width: _f_w, 342 height: _f_h, 343 left: _f_l, 344 top: _f_t, 345 opacity: _f_o, 346 zIndex: _f_z 347 }, 500, '', function() { 348 self.direction_lock = false; 349 }); 350 } 351 } 352 </script> 353 </head> 354 355 <body> 356 <div id="carrousel_a" class="carrousel"> 357 <div class="arrow_left"><</div> 358 <div class="arrow_right">></div> 359 <div class="left is_horse" data-horse="left"></div> 360 <div class="back is_horse" data-horse="back"></div> 361 <div class="right is_horse" data-horse="right"></div> 362 <div class="front is_horse" data-horse="front"></div> 363 <div class="content"></div> 364 </div> 365 </body> 366 </html>
