| 【JS实例】原生JS轮播图之旋转木马（自动、手动切换） | 您所在的位置：网站首页 › css照片旋转木马 › 【JS实例】原生JS轮播图之旋转木马（自动、手动切换） |
【JS实例】原生JS轮播图之旋转木马（自动、手动切换）
|
前言 轮播图是开发网站、app不可缺少的页面结构。轮播图有很多种，3D模式，碎片化等。这里简单写一种旋转木马形式的，如下面图： 源码（主要代码附带解释）： css： *{ margin: 0; padding: 0; list-style: none; } body{ width: 100%; height: 100%; background: #253242; } /* 大盒子 */ .box{ height: 300px; width: 800px; margin: 50px auto; position: relative; } .box .imgbox{ height: 250px; width: 800px; overflow: hidden; position: relative; -webkit-perspective: 1000px; } .box .imgbox li{ position: absolute; width: 500px; height: 250px; transition:all 0.5s linear; } .box .imgbox li img{ width: 100%; height: 100%; } /* 左侧图片样式 */ .box .imgbox .img1{ height: 180px; width: 400px; top:35px; left:0; z-index: 0; opacity: 0.8; transform:rotateY(40deg); } /* 中间图片样式 */ .box .imgbox .img2{ left: 150px; top:0; opacity: 1; z-index: 99; } /* 右侧图片样式 */ .box .imgbox .img3{ width: 400px; left: 400px; height: 180px; top:35px; opacity: 0.8; transform:rotateY(-40deg); } /* 小圆点 */ nav{ width: 100px; height: 20px; margin: 0 auto; } nav span{ width: 7px; height: 7px; display: inline-block; border-radius: 3.5px; background: #708090; cursor: pointer; } /* 小圆点选中样式 */ nav span.select{ width: 13px; background: #fff; } /* 左右键样式 */ .btn{ position: absolute; width: 50px; height: 50px; background:rgba(0,0,0,0.5) ; top: 100px; color: #fff; font-size: 30px; line-height: 50px; text-align: center; display: none; } .back{ left: 100px; } .next{ right: 100px; }html ; ;JS var box = document.getElementById('box') //获取大盒子 var imgbox = document.getElementById('imgbox') //获取图片盒子 var img = imgbox.children //获取3张图片 var back = document.getElementById('back') //获取左右键 var next = document.getElementById('next') //获取左右键 var navspan = document.getElementById('nav').children //获取小圆点 var num = 1 //默认第一个小圆点亮起,用户控制哪一个小圆点亮起 var onOff = true //开关,当前是否能点击,防止点击过快的bug var timer = null //定义定器 var classarr = ['img2','img1','img3'] //三种图片样式 //鼠标悬停图片层显示左右按钮 box.onmouseover = function (){ back.style.display = 'block' next.style.display = 'block' clearInterval(timer) //取消定时器 停止自动切换 } //鼠标离开图片层隐藏左右按钮 box.onmouseout = function (){ back.style.display = 'none' next.style.display = 'none' timer = setInterval(nextImg,3000) //重新开启定时器,自动切换 } // 下一张按钮点击 next.onclick = function (){ if(onOff){ onOff = false; //此时不可再次切换图片 nextImg() //调用切换下一张的函数 setTimeout(function(){ onOff = true },500) //0.5s后可以再次切换,0.5s与动画时间一致 } } // 上一张按钮点击 back.onclick = function (){ if(onOff){ if(num >1){ num-- }else{ num = 3 } onOff = false; removenav(navspan[num-1]) var lastValue = classarr.pop(); //取数组最后的元素 classarr.unshift(lastValue); //添加到数组头部 //for循环遍历每一个li，逐个替换class for(var i = 0 ; i onOff = true },500) } } // 自动下一张 timer = setInterval(nextImg,2500) // 切换下一张函数 function nextImg(){ if(num num = 1 } removenav(navspan[num-1]) //改变圆点样式 var fistValue = classarr.shift(); //取数组第一个值 classarr.push(fistValue); //添加到数组最后 //for循环遍历每一个li，逐个替换class for(var i = 0 ; i //修改圆点样式 for(var i = 0;i |
实现原理： 左右两侧效果用的是transform的rotateY属性，使图片看起开具有3D效果，分别定义三种状态的样式，然后每次调换图片的样式【本文地址】
公司简介
联系我们