jQuery自适应-3D旋转轮播图
3D旋转轮播图
本例源于（站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm）
其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）
自己研究重写了一遍。
一、先写静态的初始样式的css和html。我用的是 550x300的大小一致的 5张图片，代码可拓展为三张、四张、甚至大于五张。如图是静态效果：
图后的代码是静态时的样式html和css。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- jquery CDN -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
* { margin: 0; padding: 0;word-break: break-all; }
a { color:#fff;text-decoration: none;}
a:hover { text-decoration: none;}
ul,li { list-style: none;}
html,body{width: 100%;height: 100%;}
.main {max-width: 800px; margin: 0 auto;}
#slide {width: 100%;height: 420px;position: relative;overflow: hidden;}
#slide .pic { position: absolute; }
#slide .pic img {width: calc(100% - 14px);height: calc(100% - 14px);}
#slide .p1 { z-index: 3;width: 40%;height: 40%;left: -50%;top: 30%;}
#slide .p2 { z-index: 4;width: 60%;height: 60%;left: -20%;top: 20%;}
#slide .p3 {z-index: 5; width: 80%;height: 80%; left: 10%;top: 10%;}
#slide .p4 { z-index: 4; width: 60%; height: 60%; left: 60%; top: 20%;}
#slide .p5 { z-index: 3; width: 40%;height: 40%; left: 110%; top: 30%;}
#slide .btn {
position: absolute;
z-index: 6;
bottom: 20%;
width: 180px; /* 计算得出 5*30+5*6=180 */
margin-left: -90px;
left: 50%;
}
#slide .btn span {
width: 24px;
height: 8px;
border-radius: 3px;
float: left;
background-color: #dedede;
margin: 0 3px;
}
#slide .btn .on {background-color: #ffd200; } </style>
</head> <body>
<div class="main">
<div id="slide" class="slide">
<div class="pic"><img src="./images/1.png"></div>
<div class="pic"><img src="./images/2.png"></div>
<div class="pic"><img src="./images/3.png"></div>
<div class="pic"><img src="./images/4.png"></div>
<div class="pic"><img src="./images/5.png"></div>
<div class="btn">
<!-- <span data-minibtn-id='1'></span><span></span><span></span><span></span><span></span> -->
</div>
</div>
<button class="btn-prev">向左</button>
<button class="btn-next">向右</button>
</div>
</body>
</html>
二、然后，js编写动态交互效果。这段是js代码（要引入jQuery库）
备注还比较详细，一和二的代码直接复制就可以运行。
<script>
var slideNumber; //轮播图片的数量
var miniSlideBtn = true; //miniSlideBtn=true为开启滚动按钮
var isableTouch = true; //是否可以触摸滑动切换
var isAutoPlay = true; //是否可以自动轮播 //窗口大小改变时改变轮播图宽高
$(window).resize(function () {
$(".slide").height($(".slide").width() * 0.56);
}); $(function () { $("#slide").height($("#slide").width() * 0.56); //调整轮播图的高度
slideNumber = $("#slide img").length; //轮播图数量
for (let i = 0; i < slideNumber; i++) { //给每个div,而不是img,添加自定义属性编号
$("#slide .pic").eq(i).attr('data-img-id', i);
} // 根据轮播图片数量添加图片位置对应的样式
// 还有 if(slideNumber=1,=2,=3,=4,>5)
if (slideNumber = 5) {
for (let i = 0; i < slideNumber; i++) {
$("#slide .pic").eq(i).addClass('p' + (i + 1));
}
} //根据图片数量设置轮播图按钮
if (miniSlideBtn) {
for (let i = 0; i < slideNumber; i++) {
$("#slide .btn").append("<span data-minibtn-id=" + i + "></span>");
}
$("#slide .btn").width(slideNumber * 34);
$("#slide .btn").css('margin-left', '-' + slideNumber * 17 + 'px'); //调整margin-left 负值使按钮居中 } //自动切换
if (isAutoPlay) { setInterval(() => { right(); }, 3000) }
//触摸切换
if (isableTouch) { slideTouch(); } imgClickChange();//点击图片左右切换图片
currentBtn();//当前轮播按钮的选中状态 }); $(".btn-prev").click(function () { //点击按钮翻上一页
left();
})
$(".btn-next").click(function () { //点击按钮翻下一页
right();
}) /*下一张图片，右边的图向左走，注意:第一个变成最后一个，最后一个变成倒数第二个*/
function right() {
let temp = new Array();
for (let i = 0; i < slideNumber; i++) {
temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class是pic p1,pic p2,pic p3...
}
for (let i = 0; i < slideNumber; i++) {
if (i == 0) { //如果编号为第一张图片，它将变成最后一个
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[slideNumber - 1]);
} else {
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i - 1]);
}
}
imgClickChange();//点击图片左右切换图片
currentBtn();//当前轮播按钮的选中状态
} /*上一张图片, 左边的图向右走，注意:最后一张会变成第一张，第一个图变成第二个*/
function left() {
let temp = new Array();
for (let i = 0; i < slideNumber; i++) {
temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class pic p1,pic p2...
}
for (let i = 0; i < slideNumber; i++) {
if (i == slideNumber - 1) { //如果编号为最后一张图片，它将变成
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[0]);
} else {
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i + 1]);
}
}
imgClickChange();//点击图片本身切换图片
currentBtn();//当前轮播按钮的选中状态
} /*点击图片左右切换图片*/
function imgClickChange() {
// $("#slide .p2").click(function(){ prevImg();});//为什么这种写法无效
// $("#slide .p4").click(function(){ nextImg();});//为什么这种写法无效
$('#slide .pic').removeAttr('onclick');
$("#slide .p2").attr('onclick', 'left()');
$("#slide .p4").attr('onclick', 'right()');
} /*当前轮播按钮的选中状态*/
function currentBtn() {
var cur = parseInt($("#slide .p3").attr('data-img-id'));//取.p3的当前img-id
$("#slide .btn span").removeClass('on');
$("#slide .btn span[data-minibtn-id=" + cur + "]").addClass('on');
} /* jquery写法 slideTouch(),触摸滑动切换 */
/*
function slideTouch() {
let _start = 0, _end = 0;
$("#slide").on('touchstart', (e) => {
_start = e.originalEvent.targetTouches[0].pageX;
});
$('#slidd').on('touchmove', (e) => {
// _end = (_start - e.originalEvent.targetTouches[0].pageX);
_end = e.originalEvent.targetTouches[0].pageX;
});
$('#slide').on('touchend', (e) => {
if ((_start - _end) < -100) { //【起点-终点】的绝对值 >100,故 x<-100 & x>100
left();
_end = 0;
} else if ((_start - _end) > 100) {
right();
_end = 0;
}
});
}*/ /* js原生写法 slideTouch(),作用完全同上,触摸滑动切换 */
function slideTouch() {
let _start = 0, _end = 0,
_ele = document.getElementById('slide');
_ele.addEventListener('touchstart', touchStart, false);
_ele.addEventListener('touchmove', touchMove, false);
_ele.addEventListener('touchend', touchEnd, false);
function touchStart(e) {
_start = e.targetTouches[0].pageX;
}
function touchMove(e) {
_end = e.targetTouches[0].pageX;
}
function touchEnd(e) {
if ((_start - _end) < -100) { //【起点-终点】的绝对值 >100,故 x<-100 & x>100
left();
_end = 0;
} else if ((_start - _end) > 100) {
right();
_end = 0;
}
}
} </script>
效果如下图：只显示三张，太多图的话，手机移动端显示不下
jQuery自适应-3D旋转轮播图的更多相关文章
- roundabout插件使用（3d旋转轮播图）兼容IE8
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- WPF特效-实现弧形旋转轮播图
原文:WPF特效-实现弧形旋转轮播图 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/77004 ...
- CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- 四图3d旋转轮播
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>3d ...
- 【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
随机推荐
- android Studio 运行不显示avd 无法运行
上图说明: 出现上图页面,有可能是端口被占用了,我出现这种情况是杀死了一个酷狗音乐的进程 干掉以后:
- PHP错误——Allowed memory size of 134217728 bytes exhausted (tried to allocate 32 bytes)
解释是可用内存已耗尽,这关系到PHP的memory_limit的设置问题. 这里有两种方法解决 1.修改php.ini memory_limit = 128 打开终端输入下列bash命令 cd /pr ...
- linux 多线程之间信号传递
函数 sigwait sigwait的含义就如同它的字面意思:等待某个信号的到来.如果调用该函数的线程没有等到它想等待的信号那么该线程就休眠.要达到等到一个信号,我们得做下面的事: 首先,定义一个信号 ...
- Camera Sensor
camera sensor分为YUV sensor和Bayer sensor. YUV Sensor YUV Sensor输出的格式是YUV,图像的处理效果使用sensor内部的ISP,BB端接收到的 ...
- JDK7,8,JD9的hashmap，hashtable，concurrenthashmap及他们的区别
1:hashmap简介(如下,数组-链表形式) HashMap的存储结构 图中,紫色部分即代表哈希表,也称为哈希数组(默认数组大小是16,每对key-value键值对其实是存在map的内部类entry ...
- 通过MSI解压缩Cab文件
迁移自我的Github 如果只是想做类似解压缩的操作,那么可以使用如下命令行 C:\Windows\System32\expand.exe <cab file path> -F:* < ...
- (转载)Android xml资源文件中@、@android:type、@*、？、@+引用写法含义以及区别
原帖地址:http://blog.csdn.net/zfrong/article/details/7332545 Android xml资源文件中@.@android:type.@*.?.@+引用写法 ...
- jmeter笔记
Jmeter性能测试 入门 Jmeter 录制脚本:使用一个叫badbody的工具录制脚步供jmeter使用,http://www.badboy.com.au/:也可以用jmeter来录制 Jmete ...
- python笔记08-----正则表达式
创建正则表达式对象 import re 常用匹配语法 re.match 从头开始匹配 re.search 匹配包含 re.findall 把所有匹配到的字符放到以列表中的元素返回 re.splital ...
- R语言数据重塑cbind+rbind+merge+ melt+cast
R语言中的数据重塑是关于变化的数据分为行和列的方式.大多数R地数据处理的时候是通过将输入的数据作为一个数据帧进行.这是很容易提取一个数据帧的行和列数据,但在某些情况,当我们需要的数据帧的格式是不同的来 ...