多功能旋转木马轮播实例
Posted D:>_ 你好像很美味
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多功能旋转木马轮播实例相关的知识，希望对你有一定的参考价值。
今天项目需要用到旋转木马轮播功能，需要显示个可以切换的选项，这几个选项也许是图片，也许是文字，也许是一个iframe页面，也有可能是图文混排，还可能需要支持调用接口数据，需要显示多条信息，最少3条，最多不限，可能有10条，可能有10000条，于是就有了下面这个实现方法，看上去已经很完美了（样式和具体显示图片、文字或者是iframe页面、图文混排、调用接口数据等请自行在此实例基础上调试）
需要说明的是预先显示：2 1 9，是因为一共有9张图片，默认显示第一张在中间，往右是2，背后那张是3，不过背后那张无需进行设置。这是视觉初始的效果，可根据自己需要调整。
carrousel.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>旋转木马轮播</title> <style type="text/css"> html, body { width: 100%; height: 100%; } .carrousel .arrow_left { background: #000; left: 20px; } .carrousel .arrow_right { background: #000; right: 20px; } .carrousel .arrow_left, .carrousel .arrow_right { position: absolute; top: 50%; width: 50px; line-height: 50px; height: 50px; text-align: center; color: #FFF; cursor: pointer; } .carrousel .back { z-index: 1; opacity: 0.3; margin: auto; width: 10%; height: 60px; left: 45%; } .carrousel .left { left: 10%; } .carrousel .right { right: 10%; } .carrousel .left, .carrousel .right { top: 53%; width: 60px; height: 60px; z-index: 2; opacity: 0.5; } .carrousel .front { left: 45%; top: 50%; margin: auto; width: 10%; height: 100px; z-index: 3; opacity: 1; } .carrousel .front, .carrousel .right, .carrousel .back, .carrousel .left, .carrousel .content { position: absolute; background: #666; text-align: center; color: #FFF; font-size: 20px; } .carrousel .content { width: 100%; top: 80%; text-align: center; color: #fff; margin: auto; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script> <script type="text/javascript"> //页面加载完成后 $(document).ready(function(e) { //复制一个旋转木马轮播 var a = carrousel; //初始化 a.init($("#carrousel_a"), [ ["1", "这是第一张图或内容", "1.jpg"], ["2", "这是第二张图或内容", "2.jpg"], ["3", "这是第三张图或内容", "3.jpg"], ["4", "这是第四张图或内容", "4.jpg"], ["5", "这是第五张图或内容", "5.jpg"], ["6", "这是第六张图或内容", "6.jpg"], ["7", "这是第七张图或内容", "7.jpg"], ["8", "这是第八张图或内容", "8.jpg"], ["9", "这是第九张图或内容", "9.jpg"] ]); //左边箭头点击 $("#carrousel_a .arrow_left").click(function() { a.rotate("left"); }); //右边箭头点击 $("#carrousel_a .arrow_right").click(function() { a.rotate("right"); }); }); /** * carrousel.js - v1.0.0 (2016-11-5) * * 旋转木马轮播 * by tie. qq：2185987263 * * Copyright (C) 2016, tie. * All rights reserved. * **/ var carrousel = { //>3~n data: [], obj: null, //初始化 data_count: 0, init: function(obj, data) { var self = this; self.obj = obj; self.data = data; //左边图片计数器 self.left_img_count = self.data.length - 1; //右边图片计数器 self.right_img_count = 2; //数据计数器 self.data_count = 0; //文字或图片 self.obj.find(".left").html(self.data[1][0]); //car_back的top一定要是最大得 self.obj.find(".back").css({ "top": self.obj.find(".left").offset().top + 1 }); self.obj.find(".right").html(self.data[self.left_img_count][0][0]); self.obj.find(".front").html(self.data[0][0]); self.obj.find(".content").html(self.data[0][1]); }, //往左旋转 left_img_count: null, left_img_up: function() { var self = this; self.left_img_count--; if (self.left_img_count < 0) { self.left_img_count = self.data.length - 1; } var t, id; self.obj.find(".is_horse").each(function(i) { if (i > 0) { if ($(this).offset().top > t) { id = $(this).attr("data-horse"); t = $(this).offset().top; } } else { id = $(this).attr("data-horse"); t = $(this).offset().top; } }); self.obj.find("." + id).html(self.data[self.left_img_count][0]); if (self.left_img_count <= 0) { self.left_img_count = self.data.length; } self.right_img_count--; if (self.right_img_count <= 0) { self.right_img_count = self.data.length; } self.show_content("left"); }, //往右旋转 right_img_count: null, right_img_up: function() { var self = this; self.left_img_count++; if (self.left_img_count >= self.data.length) { self.left_img_count = 0; } if (self.right_img_count >= self.data.length) { self.right_img_count = 0; } var t, id; self.obj.find(".is_horse").each(function(i) { if (i > 0) { if ($(this).offset().top > t) { id = $(this).attr("data-horse"); t = $(this).offset().top; } } else { id = $(this).attr("data-horse"); t = $(this).offset().top; } }); self.obj.find("." + id).html(self.data[self.right_img_count][0]); self.right_img_count++; self.show_content("right"); }, //显示内容 show_content: function(direction) { var self = this<以上是关于多功能旋转木马轮播实例的主要内容，如果未能解决你的问题，请参考以下文章