响应式javascript堆叠式轮播图切换的实现代码

2022-7-13/ 2832 次浏览/ Web前端开发

三张图堆叠式立体轮播图效果在网页前端开发过程中经常会做到，之前不想费心费力自己弄，习惯使用一些成熟的jquery轮播图插件（如slick.js、Owl-Carousel.js）改造实现，效果也算是差强人意。这次在bilibili上看到有人分享相同效果的代码，下载下来发现代码挺简单，效果也比较合适，于是就在原代码的基础上对html、css和js都进行了些小修改，结果比较符合自己的要求。

HTML代码：

<div class="owl">
	<div id="stacked">
		<div class="item">
			<div class="pic" style="background-image:url(../uploadfiles/1.png);"></div>
		</div>
		<div class="item">
			<div class="pic" style="background-image:url(../uploadfiles/2.png);"></div>
		</div>
		<div class="item">
			<div class="pic" style="background-image:url(../uploadfiles/3.png);"></div>
		</div>
		<div class="item">
			<div class="pic" style="background-image:url(../uploadfiles/4.png);"></div>
		</div>
	</div>
	<div class="arrow prev"></div>
	<div class="arrow next"></div>
</div>

CSS代码：

.owl{width:500px;margin:0 auto;position:relative;}
#stacked{position:relative;padding-bottom:60%;}
#stacked .item{border-radius:20px;overflow:hidden;position:absolute;transition:0.3s;width:80%;z-index:1;opacity:0;left:0;top:0;transform:scale(0.72);}
#stacked .item:after{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);transition:all .3s;}
#stacked #slide0{transform:translateX(-12.5%) scale(0.75);z-index:8;opacity:1;}
#stacked #slide1{transform:translateX(12.5%) scale(1);z-index:9;opacity:1;box-shadow:0px 25px 152px rgba(0,0,0,0.25);}
#stacked #slide1:after{opacity:0;}
#stacked #slide2{transform:translateX(37.5%) scale(0.75);z-index:8;opacity:1;}
#stacked .pic{padding-bottom:75%;background:no-repeat center center;background-size:cover;}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background-color:rgba(255,255,255,.2);z-index:10;cursor:pointer;}
.arrow:after{width:7px;height:11px;content:'';display:block;background:url(../images/slick_arrow_01.png) no-repeat 0 0;background-size:100% auto;position:absolute;left:50%;top:50%;margin:-5.5px 0 0 -3.5px;}
.prev{left:1.5%;}
.next{right:1.5%;}
.next:after{background-position:0 100%;}
.dots{display:flex;align-items:center;justify-content:center;margin-top:20px;}
.dots span{display:block;width:15px;height:15px;border-radius:50%;background-color:rgba(0,0,0,.2);margin:0 10px;}
.dots .current{background-color:#000;}

javascript代码：

var stacked = document.getElementById('stacked');
var item = stacked.children;
var left = stacked.parentNode.querySelector(".prev");
var right = stacked.parentNode.querySelector(".next");
var dots = document.createElement('div');
dots.setAttribute('class', 'dots');
stacked.parentNode.appendChild(dots);
//设置一个数组，用来存id
var idArr = [];
var dot = '';
for (var i = 0; i < item.length; i++) {
    idArr.push('slide' + i);
    dot += '<span></span>';
}
dots.innerHTML = dot;
var buttons = stacked.parentNode.querySelectorAll('span');
//创建一个函数用来初始化图片
function initialize() {
    for (let i = 0; i < item.length; i++) {
        item[i].id = idArr[i];
    }
}
//设置一个变量用来当图片的索引
var index = 0;

initialize();

//设置一个定时器，让图片轮播
var timer = setInterval(next, 5000);
//clearInterval(timer);
//给箭头绑定点击事件
left.addEventListener("click", prev);
//当鼠标放到箭头上时，让定时器停止
left.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = null;
});
//当鼠标离开箭头时，让定时器重新开始
left.addEventListener("mouseout", () => {
    timer = setInterval(next, 5000);
});

right.addEventListener("click", next);
right.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = null;
});
right.addEventListener("mouseout", () => {
    timer = setInterval(next, 5000);
});

//给小方块添加点击事件
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("mousedown", () => {
        //在用户点击的时候关闭定时器
        clearInterval(timer);
        timer = null;
        //这里需要判断用户点击的小方块与当前图片的索引之差，如果
        //大于0，则表明用户需要更换的是后面的图片，反之，表明用户
        //需要更换之前也就是前面的图片
        if (index > i) {
            let x = index - i;
            while (x--) {
                prev();
            }
        } else if (index < i) {
            let x = i - index;
            while (x--) {
                next();
            }
        }
    });
}

//创建切换图片的函数
function prev() {
    //切换上一张也就是让数组的最后一个元素变成第一个元素
    idArr.push(idArr.shift());
    initialize();
    if (index === 0) {
        index = buttons.length - 1;
    } else {
        index--;
    }
    clearColor();
}

function next() {
    //跟上面反过来
    idArr.unshift(idArr.pop());
    initialize();
    if (index === buttons.length - 1) {
        index = 0;
    } else {
        index++;
    }
    clearColor();
}

//创建一个函数用来让小方块跟随图片运动
function clearColor() {
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].removeAttribute('class');
    }
    //让当前的索引变色
    buttons[index].className = 'current';
}

原地址：https://www.bilibili.com/video/av254362171/