Rumah >hujung hadapan web >tutorial js >多功能旋转木马轮播实例
多功能旋转木马轮播实例
- 高洛峰asal
- 2016-11-05 15:05:111302semak imbas
今天项目需要用到旋转木马轮播功能，需要显示个可以切换的选项，这几个选项也许是图片，也许是文字，也许是一个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;
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"><</div>
<div class="arrow_right">></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>Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：MVC实现登录,增删改查之数据展示:JSP的EL表达式Artikel seterusnya：JavaScript模块化思想之CommonJS、AMD、CMD、UMD
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional