| 轮播图(旋转木马) | 您所在的位置：网站首页 › 旋转木马韩语版视频 › 轮播图(旋转木马) |
轮播图(旋转木马)
|
作为在市面上各个应用最最常见的功能-轮播图，想必大家并不陌生了，在电商相关的网站以及app中是最常见的，随便打开一个电商类的，在首页都能看到轮播图效果。既然是这么常见的效果，有很多人都想着把这个功能做得比较炫丽，比较好看，别人一眼看去觉得高大上，下面呢，我为大家讲解一下 旋转木马轮播图的效果是如何实现；下面我们先来看一下效果： 案例效果
所谓外行看热闹，内行看门道，接触过前端开发的小伙伴 应该有思路来进行实现，暂且不管其他实现思路，先来谈谈我是怎么来实现这个功能的 布局结构1.首先，进行布局结构，利用div包含ul，每一个img利用li来进行包裹，这也是轮播图实现的标准结构，左右两个箭头利用新的盒子来包裹，然后进行定位 下面是相关样式 @charset "UTF-8"; /*初始化 reset*/ blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0 } body, button, input, select, textarea { font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif; color: #666; } ol, ul { list-style: none; } a { text-decoration: none; } fieldset, img { border: 0; vertical-align: top; } a, input, button, select, textarea { outline: none; } a, button { cursor: pointer; } .wrap { width: 1200px; margin: 100px auto; } .slide { height: 500px; position: relative; } .slide li { position: absolute; left: 200px; top: 0; } .slide li img { width: 100%; } .arrow { opacity: 0; position: absolute; top: 50%; z-index: 1000; width: 100%; } .prev, .next { width: 76px; height: 112px; position: absolute; z-index: 99; } /*箭头的图片*/ .prev { left: 0; background: url(../images/prev.png) no-repeat; } .next { right: 0; background-image: url(../images/next.png); }小伙伴们也看到了，在这个样式里面，我根本没有去设置li的位置，只设置了定位，那么这几张图片肯定是叠加起来的，下面就需要利用javascript代码来进行控制； 定义li的配置单首先，先给每一个盒子来设置它应该在的位置
从效果来看，这个旋转木马有一个3D的效果，离得近的，图片大一些，并且层级关系也高一些，离得远的，小一些，并且层级关系低一些，根据这些效果，我们可以把5个盒子的位置先固定好 **例如：**1号盒子跟5号盒子在一个层级，那么它们的缩放的宽，层级，透明度，应该是一样的，只是5号盒子的偏移比1号盒子要多 1号盒子： width: 400, left: 50, top: 20, opacity: 0.2, zIndex: 2 5号盒子： width: 400, left: 750, top: 20, opacity: 0.2, zIndex: 2同理，2号盒子和4号盒子在一个层级，相应的宽，层级，透明度应该是一样，只是4号盒子的偏移比1号盒子要多，而且顶部的偏移也需要比上一个层级的要多，这样产生一个3D效果 2号盒子： width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 4号盒子： width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 33号盒子在最中心，也就是用户看到的图片，那么它的宽应该就是图片的宽度了，而且层级是最高的，完全不透明 width: 800, top: 100, left: 200, opacity: 1, zIndex: 4这样没一个盒子的位置就固定好了，那么我们可以把这些值封装到对象中，方便我们去取 var config = [{ width: 400,//宽度 top: 20,//顶部偏移 left: 50,//左偏移 opacity: 0.2,//透明度 zIndex: 2//层级 }, //0 { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 }, //1 { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 }, //2 { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 }, //3 { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 } //4 ];位置已经定义好了，接下来需要的就是把这些值设置给每一个li，当页面一加载，所有图片是以动画的形式到了执行的位置，那么我们先需要来定义动画函数，这里如果想简单实现，不必定义动画函数，在li上面添加过渡样式即可 动画函数 /** * 封装动画的函数 * @param {*} obj 传递过来的执行动画的元素 * @param {*} json 需要执行什么要的动画 * @param {*} fn 执行完毕的回调 */ function animate(obj, json, fn) { //保证只会开启一个定时器执行动画 clearInterval(obj.timer); //开启定时器 obj.timer = setInterval(function () { //控制动画是否执行到目标值的标记 var flag = true; //遍历传递过来的对象 for (var k in json) { if (k === "opacity") {//透明度的变化 //opacity的值是 0 - 1，先乘以100 方便计算 //leader 就是元素当前的属性值 var leader = getStyle(obj, k) * 100; //元素目标属性值 var target = json[k] * 100; //算出每次需要变化的值 var step = (target - leader) / 10; //取整 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //重新把值设置给元素 obj.style[k] = leader / 100; } else if (k === "zIndex") {//堆叠顺序的设置 obj.style.zIndex = json[k]; } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader != target) {//如果当前属性值不等于目标值，说明还需要执行动画 flag = false; } } if (flag) {// clearInterval(obj.timer); if (fn) { fn();//动画执行完毕之后的回调 } } }, 15); } /** * 获取元素对象的属性 * @param {*} obj 元素对象 * @param {*} attr 获取什么属性的值 */ function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } } 把配置单里面的值设置给每一个li获取li的集合，然后进行遍历，config里面对应的配置对象取出来，然后设置给li，这里还有一个小细节需要来处理，默认左右箭头是不显示的，只有当鼠标 移入到轮播图的时候才显示 //找人 var wrap = document.getElementById("wrap"); var arrow = document.getElementById("arrow"); var slide = document.getElementById("slide"); var ul = slide.children[0]; var lis = ul.children;//所有图片 //1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失 wrap.onmouseover = function () { animate(arrow, {"opacity": 1}); }; wrap.onmouseout = function () { animate(arrow, {"opacity": 0}); }; //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置 for (var i = 0; i //把开始的元素放到最后 config.push(config.shift()); assign();//重新设置li的位置 }; //点击左箭头 arrLeft.onclick = function () { //把最后的元素放到开始 config.unshift(config.pop()); assign(); };
当我们点击按钮，让li在执行动画的时候，不应该再让用户来触发动画，防止数据错乱，用一个boolean变量来进行控制 window.onload = function() { ... //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置 function assign() { for (var i = 0; i flag = true; //动画执行完成后重新打开阀门 }); } } assign(); //3.点击箭头旋转 //点击右箭头 arrRight.onclick = function() { if (flag) { flag = false; //关闭阀门 //把开始的元素放到最后 ... } }; //点击左箭头 arrLeft.onclick = function() { if (flag) { flag = false; //把最后的元素放到开始 ... } }; //4.添加节流阀 var flag = true; //表示阀门是打开的 }; 完整js代码 window.onload = function() { //找人 var wrap = document.getElementById("wrap"); var arrow = document.getElementById("arrow"); var arrLeft = document.getElementById("arrLeft"); var arrRight = document.getElementById("arrRight"); var slide = document.getElementById("slide"); var ul = slide.children[0]; var lis = ul.children; //所有图片 //1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失 wrap.onmouseover = function() { animate(arrow, { "opacity": 1 }); }; wrap.onmouseout = function() { animate(arrow, { "opacity": 0 }); }; //2.设置图片位置，把每一个位置对应的属性记录在对象中，然后把对象放在数组中，方便去取 var config = [{ width: 400, top: 20, left: 50, opacity: 0.2, zIndex: 2 }, //0 { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 }, //1 { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 }, //2 { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 }, //3 { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 } //4 ]; //其实就是一个配置单 规定了每张图片的大小位置层级透明度 //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置 function assign() { for (var i = 0; i flag = true; //动画执行完成后重新打开阀门 }); } } assign(); //3.点击箭头旋转 //点击右箭头 arrRight.onclick = function() { if (flag) { flag = false; //关闭阀门 //把开始的元素放到最后 config.push(config.shift()); assign(); } }; //点击左箭头 arrLeft.onclick = function() { if (flag) { flag = false; //把最后的元素放到开始 config.unshift(config.pop()); assign(); } }; //4.添加节流阀 var flag = true; //表示阀门是打开的 };有兴趣小伙伴可以来关注一下我们长沙校区黑马程序员，下面是微信二维码，请加上备注-CSDN |
【本文地址】
公司简介
联系我们