js实现3D轮播图效果
本文实例为大家分享了js实现3D轮播图效果的具体代码，供大家参考，具体内容如下
【js实现3D轮播图效果】
文章图片
主要有平移和旋转构成3d效果的轮播图，小白一只，不足之处还请大家多多指教，代码如下
css代码：
*{padding: 0; margin: 0; }.box{position: relative; width: 100%; height: 100%; top: 200px; margin: auto; }.warpper{position: absolute; width: 100%; height: 100%; perspective: 800px; transform-style:preserve-3d; }.box .warpper img{width: 300px; height: 200px; float: left; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; border-radius: 8px; transition: all 1s ease-in-out; }.btn{position: relative; top: 50%; left: 50%; width: 1200px; transform: translate(-50%,-20px); }.btn .left,.btn .right{height: 50px; width: 50px; font-size: 30px; text-align: center; line-height: 50px; background-color: black; color: white; border-radius: 15%; position: absolute; }.btn .left{left: 0; }.btn .right{right: 0; }.btn span:hover{background-color: rgba(0,0,0,0.8); }.points{position: absolute; left: 50%; bottom: 10px; transform: translate(-50%,200px); height: 14px; }.points li{display: inline-block; list-style: none; width: 14px; height: 14px; border: 1px solid #000; border-radius: 50%; background-color: white; margin: 0 5px; }.points .current{background-color: red; }
HTML代码：
文章图片
文章图片
文章图片
文章图片
文章图片
< >
JS代码：
var imgs = document.querySelectorAll("img")var btns = document.querySelectorAll("span")var ul = document.querySelector(".points")var lis = document.getElementsByTagName("li")var timervar current = 0 // 当前播放图片的索引var flag = true //点击防抖节流var len = imgs.length //图片长度function loadFirst() {imgMove()bind()btnClick()getDot()showDot()autoPlay()}loadFirst()function imgMove() {var mlen = Math.floor(len / 2)for (var i = 0; i < mlen; i++) {// 当前播放图片索引值var rimg = current + 1 + ivar limg = len + current - 1 - iif (rimg >= len) {rimg -= len}if (limg >= len) {limg -= len}imgs[limg].style.transform = `translateX(${150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(-30deg)`imgs[rimg].style.transform = `translateX(${-150 * (i + 1)}px) translateZ(${200 - i * 100}px) rotateY(30deg)`}imgs[current].style.transform = `translateZ(300px)`}// 自动播放的函数function autoPlay() {timer = setInterval(function () {if (current >= len - 1) {current = 0} else {current++}imgMove()autoLi()}, 3000)}// 点击图片进行播放function bind() {for (let i = 0; i < imgs.length; i++) {imgs[i].onclick = function () {current = iimgMove()autoLi()}imgs[i].onmouseover = function () {clearInterval(timer)}imgs[i].onmouseout = function () {autoPlay()}}}// 点击左右按钮function btnClick() {for (let i = 0; i < btns.length; i++) {btns[i].onclick = function () {// 防止狂点击if (!flag) {return}flag = falseif (i == 0) {// 上一张if (current <= 0) {current = len - 1} else {current--}} else {//下一张if (current >= len - 1) {current = 0} else {current++}}setTimeout(function () {flag = true}, 1000) imgMove()autoLi() }btns[i].onmouseenter = function () {clearInterval(timer)}btns[i].onmouseout = function () {autoPlay()}}}// 点function getDot() {for (var i = 0; i < len; i++) {ul.innerHTML += ``}lis[0].classList.add("current")}function showDot() {for (let i = 0; i < len; i++) {lis[i].onclick = function () {for (var j = 0; j < len; j++) {lis[j].classList.remove("current")}this.classList.add("current")current = iimgMove()}}}function autoLi() {for (var i = 0; i < len; i++) {if (i == current) {lis[i].classList.add("current")} else {lis[i].classList.remove("current")}}}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
