本篇内容主要讲解“怎么用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代码：
<div class="box"> <div class="warpper"> <img src="./励志3.jpg" alt=""> <img src="./励志2.jpg" alt=""> <img src="./2f1d.jpg" alt=""> <img src="./aimg.jpg" alt=""> <img src="./peg.jpg" alt=""> </div> <div class="btn" id="btn"> <span class="left"> < </span> <span class="right"> > </span> </div> <ul class="points"> </ul> </div> <script src="swarp.js"></script>
JS代码：
var imgs = document.querySelectorAll("img")
var btns = document.querySelectorAll("span")
var ul = document.querySelector(".points")
var lis = document.getElementsByTagName("li")
var timer
var 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 + i
var limg = len + current - 1 - i
if (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 = i
imgMove()
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 = false
if (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 += `<li></li>`
}
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 = i
imgMove()
}
}
}
function autoLi() {
for (var i = 0; i < len; i++) {
if (i == current) {
lis[i].classList.add("current")
} else {
lis[i].classList.remove("current")
}
}
}到此，相信大家对“怎么用js实现3D轮播图效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
