jq实现轮播图(景深效果)—

最近工作不是很忙，正好可以多多练习一下jq，毕竟这块我实在是基础薄弱，在工作中经常会遇到各种各样的问题，导致效率很低。

今天的案例是一个自动轮播图：

上面的轮播图跟以往的轮播有点区别，常见的轮播图是只展示一张图片，其他图片是隐藏的。常见轮播图的实现方式是所有图片一行排列，依次改变图片的margin-left值，如果要实现无缝轮播，则需要复制一份第一张放在图片集合的最后。

此处要实现的效果，图片有前有后，则需要用到景深。

注意：添加景深效果时需要给父级添加

然后给每张图片设置position:absolute,父级添加position:relative,此时所有的图片会重叠展示。然后根据图片集合的for循环，给每张图片添加transform:translateX()横向偏移距离，保证图片出现左右方向的错位。

html部分
这个部分是最简单的：

<div class="wrapper" id="wrap"><div class="img-box"><img src="./img/1.png" alt="" /><img src="./img/2.png" alt="" /><img src="./img/3.png" alt="" /><img src="./img/4.png" alt="" /><img src="./img/5.png" alt="" /></div><div class="list"><ul><li class="active"></li><li></li><li></li><li></li><li></li></ul></div>
</div>

css部分
先分析一下样式：

父级元素添加景深效果，且为flex横向布局
子级图片部分position:absolute，相对于父级绝对定位，并添加transition动画

* {margin: 0;padding: 0;list-style: none;font-size: 0;
}.wrapper {position: relative;width: 600px;height: 400px;border: 1px solid #000;margin: 100px auto;display: flex;justify-content: center;align-items: center;transform-style: preserve-3d;perspective: 800px;
}.wrapper .img-box {width: 500px;height: 300px;
}.wrapper .img-box img {position: absolute;width: 500px;height: 300px;box-shadow: 0 8px 30px #ddd;transition: transform 0.5s ease-in-out;
}.wrapper .list {position: absolute;width: 100%;height: 50px;bottom: -70px;left: 0;text-align: center;
}.wrapper .list ul {display: inline-block;
}.wrapper .list ul li {width: 15px;height: 15px;background-color: #ccc;border-radius: 50%;display: inline-block;margin-left: 10px;cursor: pointer;
}.wrapper .list ul li.active {background-color: red;
}

js部分：这个是最最重要的，其实这个代码里面的根据索引求取位置的部分，我还没有想明白。将这个案例的老师都是一带而过，我不知道为什么要这么写，感觉有点懵……

分析一下js部分的代码：

jq很容易获取到img的图片集合dom
将索引为0的图片默认为中间的一张图片，通过中间索引-i-1获取左侧的图片索引，通过中间索引+i+1获取右侧的图片索引，针对左侧的图片，transform:translateX(负数),针对右侧的图片，transform:translateX(正数).具体移动的距离跟索引也是有关系的。
案例中为了更直观的理解，将中间索引默认为0,左侧的索引默认为-2,-1也就是3,4,右侧的索引默认为1,2

具体代码如下：

var curDisplay = 0; //记录当前展示图片索引
// 锁  防止连续点击
var flag = true;
var timer;
var imgLen = $('img').length;
// 初始化函数
function init() {move();bindEvent();
}
init();
//移动函数
function move(){var hLen = $('img').length / 2;//记录分散在左右的图片索引var lNum,rNum;//利用for循环与中间值为左右索引赋值for(var i = 0;i<hLen;i++){//左侧图片的索引lNum = curDisplay - i - 1;//左侧图片水平方向平移$('img').eq(lNum).css({transform:'translateX('+ (-150*(i+1)) +'px) translateZ('+ (100 - i*100) +'px)'});//计算右侧图片索引值rNum = curDisplay + i + 1;//临界值判断if(rNum > imgLen - 1){rNum -= imgLen;}//右侧图片向右平移$('img').eq(rNum).css({transform:'translateX('+ (150 * (i+1)) +'px) translateZ('+ (100 - i*100) +'px)'})}//中间显示图片向前平移$('img').eq(curDisplay).css({transform:'translateZ(200px)'})//绑定动画运动结束事件  当一次动画结束后才能进行下一次运动$('img').on('transitionend',function(){flag = true;});changeStyle();
}
function bindEvent(){$('img').add('.list li').on('click',function(e){if(flag){flag = false;//将当前显示图片切换为当前点击图片curDisplay = $(this).index();console.log($(this).index());move();}}).hover(function(){//鼠标覆盖清除定时器clearInterval(timer);},function(){//鼠标移走设置定时器timer = setInterval(function(){play();},2000)})timer = setInterval(function(){play();},2000)
}
//自动播放
function play(){if(curDisplay == imgLen - 1){curDisplay = 0;}else{curDisplay++;}move();
}
//改变list小圆点选中状态
function changeStyle(){$('.active').removeClass('active');//将当前选中的图片对应额小圆点设置为选中状态$('.list li').eq(curDisplay).addClass('active');
}

jq实现轮播图(景深效果)——功能实现相关推荐

html+css部分面试题（4）+拼多多商家入驻网页轮播图hover效果
目录 31:为什么要初始化样式? 32. BFC 是什么? 33.HTML 与 XHTML--二者有什么区别? 34.html 常见兼容性问题? 35.对 WEB 标准以及 W3C 的理解与认识补充 ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能
简要教程 jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得 ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
自已动手写的轮播图插件，功能不断增加中，可以下载
前,平时总是使用别人的轮播图插件,这次决定自已写一个,功能越多越好.实际现起来,发现并不容易.先实现基本的功能,下两周要丰富起来. 图是别人的图,心是自已的心.直接上代码: 一:结构 <!-- ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）
效果展示代码展示: WXML代码 <view class="selection_cards" bindtouchstart="touchstart" b ...
用Flutter实现一个类似于轮播图的效果
效果图: 过程脑洞自补!!! 类似于上图的效果,我们应该能想到用PageView来实现,但是思来想去,PageView官方并没有给自定义的参数,就是我们需要的下面的指示器的效果.现在我就来说下一下怎么 ...
js判断定时器是否启动_原生js如何做出轮播图的效果
<div class="box"><ul><li class="active"><img src="./im ...

jq实现轮播图(景深效果)——功能实现

注意：添加景深效果时需要给父级添加

jq实现轮播图(景深效果)——功能实现相关推荐

最新文章

热门文章