多功能旋转木马轮播实例

今天项目需要用到旋转木马轮播功能，需要显示个可以切换的选项，这几个选项也许是图片，也许是文字，也许是一个iframe页面，也有可能是图文混排，还可能需要支持调用接口数据，需要显示多条信息，最少3条，最多不限，可能有10条，可能有10000条，于是就有了下面这个实现方法，看上去已经很完美了（样式和具体显示图片、文字或者是iframe页面、图文混排、调用接口数据等请自行在此实例基础上调试）

需要说明的是预先显示：2   1   9，是因为一共有9张图片，默认显示第一张在中间，往右是2，背后那张是3，不过背后那张无需进行设置。这是视觉初始的效果，可根据自己需要调整。

carrousel.html

按 Ctrl+C 复制代码

<!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;

if (direction == "left") {
self.data_count--;
if (self.data_count < 0) {
self.data_count = self.data.length - 1;
}
}

if (direction == "right") {
self.data_count++;
if (self.data_count >= self.data.length) {
self.data_count = 0;
}
}

self.obj.find(".content").animate({
opacity: 0
}, 500, ‘‘, function() {
self.obj.find(".content").html(self.data[self.data_count][1]).animate({
opacity: 1
}, 500);
});
},

//旋转
direction_lock: false,
rotate: function(direction) {

var self = this;

if (self.direction_lock) {
return false;
}
self.direction_lock = true;

var ol = self.obj.find(".left"),
ob = self.obj.find(".back"),
or = self.obj.find(".right"),
of = self.obj.find(".front"),
t1 = "opacity";
t2 = "z-index";

var l_l = ol.offset().left,
l_t = ol.offset().top,
l_w = ol.width(),
l_h = ol.height(),
l_o = ol.css(t1),
l_z = ol.css(t2),

r_l = or.offset().left,
r_t = or.offset().top,
r_w = or.width(),
r_h = or.height(),
r_o = or.css(t1),
r_z = or.css(t2),

b_l = ob.offset().left,
b_t = ob.offset().top,
b_w = ob.width(),
b_h = ob.height(),
b_o = ob.css(t1),
b_z = ob.css(t2),

f_l = of.offset().left,
f_t = of.offset().top,
f_w = of.width(),
f_h = of.height(),
f_o = of.css(t1),
f_z = of.css(t2);

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;

if (direction == "left") {
self.left_img_up();
_f_l = l_l, _f_t = l_t, _f_w = l_w, _f_h = l_h, _f_o = l_o, _f_z = l_z;
_b_l = r_l, _b_t = r_t, _b_w = r_w, _b_h = r_h, _b_o = r_o, _b_z = r_z;
_r_l = f_l, _r_t = f_t, _r_w = f_w, _r_h = f_h, _r_o = f_o, _r_z = f_z;
_l_l = b_l, _l_t = b_t, _l_w = b_w, _l_h = b_h, _l_o = b_o, _l_z = b_z;
}
if (direction == "right") {
self.right_img_up();
_f_l = r_l, _f_t = r_t, _f_w = r_w, _f_h = r_h, _f_o = r_o, _f_z = r_z;
_b_l = l_l, _b_t = l_t, _b_w = l_w, _b_h = l_h, _b_o = l_o, _b_z = l_z;
_r_l = b_l, _r_t = b_t, _r_w = b_w, _r_h = b_h, _r_o = b_o, _r_z = b_z;
_l_l = f_l, _l_t = f_t, _l_w = f_w, _l_h = f_h, _l_o = f_o, _l_z = f_z;
}
ol.animate({
width: _l_w,
height: _l_h,
left: _l_l,
top: _l_t,
opacity: _l_o,
zIndex: _l_z
}, 500);
ob.animate({
width: _b_w,
height: _b_h,
left: _b_l,
top: _b_t,
opacity: _b_o,
zIndex: _b_z
}, 500);
or.animate({
width: _r_w,
height: _r_h,
left: _r_l,
top: _r_t,
opacity: _r_o,
zIndex: _r_z
}, 500);
of.animate({
width: _f_w,
height: _f_h,
left: _f_l,
top: _f_t,
opacity: _f_o,
zIndex: _f_z
}, 500, ‘‘, function() {
self.direction_lock = false;
});
}
}
</script>
</head>

<body>
<div id="carrousel_a" class="carrousel">
<div class="arrow_left">&lt;</div>
<div class="arrow_right">&gt;</div>
<div class="left is_horse" data-horse="left"></div>
<div class="back is_horse" data-horse="back"></div>
<div class="right is_horse" data-horse="right"></div>
<div class="front is_horse" data-horse="front"></div>
<div class="content"></div>
</div>
</body>
</html>

按 Ctrl+C 复制代码

转载

时间： 2024-10-10 09:06:22

多功能旋转木马轮播实例的相关文章

轮播实例

本实例为平时练习所用,故也许不是符合每个实战项目,所以仅提供轮播实例思路以便启发灵感. 1.以下为html部分 <div id="slider-box"> <!-- 滑动广告,图片换为自己地址即可--> <div id="slider"> <img class="active" src="Images/index/banner_02.jpg"> <img src="

JavaScript旋转木马轮播图

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/> <script src="common.js"><

旋转木马轮播图（转）

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="description" content="CSS3 transform实现图片旋转木马3D浏览效果 ? 张鑫旭-鑫空间-鑫生活" /> <

scrollView封装广告轮播实例代码(Hank版)

#import <UIKit/UIKit.h> @interface PJXPageView : UIView /* 圆点颜色*/ @property(strong,nonatomic)UIColor *PJX_currentColor; /*没选中的圆点颜色*/ @property(strong,nonatomic)UIColor *PJX_otherColor; /*  图片数据*/ @property(strong,nonatomic)NSArray *PJX_imageNames; +

BootStrap：轮播插件

前述 利用 BootStrap 实现图片轮播,包括 基本轮播.带标题的轮播.设置轮播速度的轮播.控制前后的轮播 实例 基本轮播 代码 1.引入bootstrap和jQuery文件 <!-- jQuery文件.务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 新 Bootst

jQuery补充，基于jQuery的bxslider轮播器插件

基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=n

一个用原生JS造的轮播图插件

a native-js slider 一个无缝轮播图的小轮子 ( ?° ?? ?°)?? 前言 自己弄这个轮子是来自之前vue做一个音乐播放器项目时,用到了一个第三方vue组件better-scroll,当时参考这个文档做轮播图的时候,发现slider-item真实渲染出来的多了两个节点,向作者提问了下,回答当传入 snap:{loop:true} 的时候,前后各 clone 一个节点,保证可以无缝循环轮播,那么多克隆这两个节点是怎么实现无无缝轮播图呢,查阅了相关原理,就做了下这个轮子. 在线演

NodeJS Express博客项目实战 之 轮播图管理

轮播图管理添加功能 后台轮播图管理的位置: 因此需在此处加一个路由的跳转: 在视图views中后台的index.html <h2><span class="icon-user"></span>系统管理</h2> <ul > <li><a href="/admin/slider" target="right"><span class="icon-ca

Bootstrap历练实例：轮播(carousel)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"