类似网易云轮播图（原生JS）

最新推荐文章于 2022-03-20 09:44:09 发布

ChenNianA

最新推荐文章于 2022-03-20 09:44:09 发布

阅读量332

点赞数 1

文章标签： js javascript css html

本文链接：https://blog.csdn.net/ChenNianA/article/details/117733319

版权

类似网易云轮播图（原生JS）

源代码已经上传
类似网易云的轮播图
使用的是原生js
实现效果

1. HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./index.css">
</head>

<style>
    /* 可以改变样式大小 */
    .swiper{
        width: 700px;
        height: 200px;
        margin: 100px auto;
    }
</style>

<body>
    <div class="swiper">
        <ul class="swiper-main">
            <!-- 插入想要插入的图片 -->
            <li><img src="./images/img0.jpg" alt=""></li>
            <li><img src="./images/img1.jpg" alt=""></li>
            <li><img src="./images/img2.jpg" alt=""></li>
            <li><img src="./images/img3.jpg" alt=""></li>
            <li><img src="./images/img4.jpg" alt=""></li>
            <li><img src="./images/img5.webp" alt=""></li>
            <li><img src="./images/img6.jpg" alt=""></li>
            <li><img src="./images/img7.webp" alt=""></li>
            <li><img src="./images/img8.webp" alt=""></li>
            <li><img src="./images/img9.jpg" alt=""></li>
        </ul>
        <!-- 左右箭头 -->
        <div class="arrow">
            <a href="javascript:;">&lt;</a>
            <a href="javascript:;">&gt;</a>
        </div>
        <!-- 小圆点 -->
        <ul class="dots">
        </ul>
    </div>
</body>

<script src="./index.js"></script>
</html>

2. CSS部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

ul,li,ol{
    list-style: none;
}

.swiper{
    position: relative;
    width: 600px;
    height: 200px;
}

.swiper-main{
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-main>li{
    position: absolute;
    width: 30%;
    height: 60%;
    opacity: 0;
    top: 20%;
    left:0;
    z-index: 0;
}

.swiper-main>li>img{
    width: 100%;
    height: 100%;
}

.swiper-main>li:nth-of-type(1){
    width: 30%;
    height: 60%;
    top: 20%;
    left: 0;
    z-index: 1;
    opacity: 0.4;
}
.swiper-main>li:nth-of-type(2){
    width: 40%;
    height: 80%;
    top: 10%;
    left: 10%;
    z-index: 2;
    opacity: 0.7;
}

.swiper-main>li:nth-of-type(3){
    width: 50%;
    height: 100%;
    top: 0;
    left: 25%;
    z-index: 3;
    opacity: 1;
}

.swiper-main>li:nth-of-type(4){
    width: 40%;
    height: 80%;
    top: 10%;
    left:50%;
    z-index: 2;
    opacity: 0.7;
}

.swiper-main>li:nth-of-type(5){
    width: 30%;
    height: 60%;
    top: 20%;
    left: 70%;
    z-index: 1;
    opacity: 0.4;
}


.arrow{
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 50%;
    margin-top: -25px;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 30px;
    z-index: 4;
}

.arrow>a{
    text-align: center;
    line-height: 50px;
    width: 50px;
    height: 50px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
}

.dots{
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 10;
    display: flex;
    justify-content: center;
    z-index: 4;
}

.dots>li{
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #333;
}

.dots .active{
    background-color: orange;
}

3. JS

const swiper = document.querySelector('.swiper');
const lis = document.querySelectorAll('.swiper-main>li');
const arrows = document.querySelectorAll('.arrow>a');
const dots = document.querySelector('.dots');

let str = '';
for (let i = 0; i < lis.length; i++) {
    str += '<li></li>'
}
dots.innerHTML = str;


// 数组存样式
const opacitys = []
const widths = []
const heights = []
const tops = []
const lefts = []
const zIndexs = []
//给每个li设置自定义属性  数组赋值
for (let i = 0; i < lis.length; i++) {
    lis[i].index = i;
    opacitys.push(getComputedStyle(lis[i]).opacity);
    widths.push(parseInt(getComputedStyle(lis[i]).width));
    heights.push(parseInt(getComputedStyle(lis[i]).height));
    tops.push(parseInt(getComputedStyle(lis[i]).top));
    lefts.push(parseInt(getComputedStyle(lis[i]).left));
    zIndexs.push(parseInt(getComputedStyle(lis[i]).zIndex));
}

//设置中点
const midDot = parseInt(lis.length / 2);

const dot = dots.querySelectorAll('li');
setDot()

arrows[1].onclick = function () {
    move('add', 1);
}

arrows[0].onclick = function () {
    move('desc', 1);
}

var autoPlay = setInterval(() => {
    move('desc', 1)
}, 2000)

swiper.onmouseenter = function () {
    clearInterval(autoPlay);
}

swiper.onmouseleave = function () {
    autoPlay = setInterval(() => {
        move('desc', 1)
    }, 2000)
}

for (let i = 0; i < lis.length; i++) {
    dot[i].onmouseenter = function () {
        // moveDot(i);
        const distance = i - find();
        if (distance < 0) {
            move('add', Math.abs(distance))
        }
        if (distance > 0) {
            move('desc', Math.abs(distance))
        }
    }
}

let flag = true;
var move = (type, steps) => {
    let attrNum = lis.length;
    if (!flag) { return; }
    flag = false;
    let count = 0;
    switch (type) {
        case 'add':
            count = 1;
            break;
        case 'desc':
            count = -1;
            break;
        default:
            break;
    }
    for (let i = 0; i < lis.length; i++) {
        for (let j = 0; j < steps; j++) {
            lis[i].index += count;
            if (lis[i].index < 0) { lis[i].index = lis.length - 1; }
            if (lis[i].index === lis.length) { lis[i].index = 0; }
            lis[i].style.zIndex = zIndexs[lis[i].index];
        }
        setDot();
        moveTo(lis[i], {
            width: widths[lis[i].index],
            height: heights[lis[i].index],
            top: tops[lis[i].index],
            left: lefts[lis[i].index],
            opacity: opacitys[lis[i].index],
        }, function () {
            attrNum--;
            if (attrNum === 0) {
                flag = true;
            }
        })
    }
}

//激活小圆点
function setDot() {
    for (let i = 0; i < lis.length; i++) {
        if (lis[i].index === midDot) {
            dot[i].classList.add('active');
        } else {
            dot[i].classList.remove('active');
        }
    }
}

//找到激活点
function find() {
    for (let i = 0; i < lis.length; i++) {
        if (dot[i].className.toString().indexOf('active') !== -1) {
            return i;
        }
    }
}


//判断对象是否为空
function isEmptyObj(obj) {
    let flag = true
    for (let k in obj) {
        flag = false
    }
    return flag
}

var moveTo = function (elem, obj, cb) {
    const timer = {};
    for (let key in obj) {
        let flag = false;
        //当有透明度时，将数值*100 运算，相对应的也要*100
        if (key === 'opacity') { flag = true; }
        const goal = obj[key] * (flag ? 100 : 1);
        timer[key] = setInterval(() => {
            const now = parseInt(flag ? getComputedStyle(elem)[key] * 100 : getComputedStyle(elem)[key]);
            let step = (goal - now) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (now === goal) {
                clearInterval(timer[key]);
                delete timer[key];
                if (isEmptyObj(timer)) {
                    cb();
                }
            } else {
                elem.style[key] = flag ? Math.floor(now + step) / 100 : (Math.floor(now + step) + 'px');
            }
        }, 1)
    }
}