HTML+CSS+JS实现Swiper插件网一个动态效果

---

HTML+CSS+JS实现Swiper插件网一个动态效果，swiper盒子内容就草率的用数字代替吧，话不多说，先看效果

rotate_swiper

---

一、说明

在浏览Swiper插件网的时候看见了一个Swiper效果就想把这个仿照样式做出来

说明：本案例旋转的图片素材来源于 Swiper中文网/Swiper在移动端的实际应用（演示）

交互效果仿照 Swiper在移动端的实际应用（演示） 某宝全球购的旋转地球 的动态效果，创作修改实现，下图示：

图片素材链接-1：https://swiper.com.cn/demo/taobao-world/images/hk.png
图片素材链接-2：https://swiper.com.cn/demo/taobao-world/images/au.png
图片素材链接-3：https://swiper.com.cn/demo/taobao-world/images/en.png
图片素材链接-4：https://swiper.com.cn/demo/taobao-world/images/jp.png
图片素材链接-5：https://swiper.com.cn/demo/taobao-world/images/us.png

二、代码部分

1.HTML代码

    <div class="swiper_rotate">
        <div class="rotate_box">
            <div class="rotate_circle">
                <div class="rotate_pic"></div>
            </div>
            <div class="shadow_box"></div>
        </div>
        <div class="swiper_box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        <div id="next">
            <svg t="1712474542494" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1432">
                <path
                    d="M614.727053 511.42259l-403.237243-403.23724299a63.349415 63.349415 0 1 1 89.622481-89.62248201L749.160776 466.675274a63.349415 63.349415 0 0 1 0 89.494632L301.048367 1004.282315a63.349415 63.349415 0 1 1-89.49463301-89.622482L614.663128 511.42259z"
                    fill="#fff" p-id="1433"></path>
            </svg>
        </div>
        <div id="prev">
            <svg t="1712474561555" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1630">
                <path
                    d="M409.272947 512.57741l403.237243 403.23724299a63.349415 63.349415 0 1 1-89.622481 89.62248201L274.839224 557.324726a63.349415 63.349415 0 0 1 0-89.494632L722.951633 19.717685a63.349415 63.349415 0 1 1 89.49463301 89.622482L409.336872 512.57741z"
                    p-id="1631" fill="#fff"></path>
            </svg>
        </div>
    </div>

2.CSS代码

       * {
            margin: 0;
            padding: 0;
        }
        .swiper_rotate {
            width: 100%;
            height: calc(100vh);
            position: relative;
            overflow: hidden;
        }
        .rotate_box {
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgb(178, 71, 253) 30%, rgb(243, 99, 248) 100%);
            overflow: hidden;
            position: relative;
        }
        .rotate_circle {
            width: 800px;
            height: 800px;
            position: relative;
            margin: 200px auto;
            border-radius: 50%;
            background: radial-gradient(closest-side, rgb(94, 103, 253) 65%, rgb(18, 187, 253) 100%);
        }
        .rotate_pic {
            width: 1200px;
            height: 1200px;
            position: relative;
            position: absolute;
            top: -200px;
            left: -200px;
            transition: ease-in-out .5s;
        }
        .rotate_pic img {
            width: 20%;
            height: 100%;
            position: absolute;
            left: 40%;
        }
        .rotate_pic img:nth-child(2) {
            transform: rotate(45deg);
        }
        .rotate_pic img:nth-child(3) {
            transform: rotate(90deg);
        }
        .rotate_pic img:nth-child(4) {
            transform: rotate(135deg);
        }
        .rotate_pic img:nth-child(5) {
            transform: rotate(180deg);
        }
        .shadow_box {
            width: 100%;
            height: 65%;
            position: absolute;
            top: 400px;
            background: linear-gradient(to right, rgb(178, 71, 253) 30%, rgb(243, 99, 248) 100%);
            filter: blur(15px);

        }
        .swiper_box {
            height: 65%;
            position: relative;
            position: absolute;
            top: 320px;
            display: flex;
            flex-direction: row;
            transition: ease-in-out .5s;
        }
        .swiper_box div {
            width: calc(70vw);
            height: 90%;
            background: rgb(255, 255, 255, .6);
            margin:0 calc(15vw);
            border-radius: 15px;
            font-size: 50px;
            font-weight: 700;
            color: coral;
            /* 文本居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #next,
        #prev {
            position: absolute;
            top: 60%;
            width: 70px;
            cursor: pointer;
        }
        #next {
            right: 0;
        }
        #prev {
            left: 0;
            opacity: .6;
            pointer-events: none;
        }

3.JS代码

        const rotatePic = document.querySelector('.rotate_pic')
        const swiperBox = document.querySelector('.swiper_box')
        const swiperDiv = document.querySelectorAll('.swiper_box div')
        const next = document.querySelector('#next')
        const prev = document.querySelector('#prev')

        function render(index) {
            for (let i = 0; i < index; i++) {
                rotatePic.innerHTML += `<img src="images/rotate_${i + 1}.png">`
            }
        }
        render(swiperDiv.length)

        let chgID = 0
        function btnCommon() {
            next.style.pointerEvents = chgID == swiperDiv.length - 1 ? 'none' : 'auto'
            prev.style.pointerEvents = chgID == 0 ? 'none' : 'auto'
            next.style.opacity = chgID == swiperDiv.length - 1 ? .6 : 1
            prev.style.opacity = chgID == 0 ? .6 : 1
            rotatePic.style.transform = `rotate(-${chgID * 45}deg)`
            swiperBox.style.transform = `translateX(-${chgID * 100 / swiperDiv.length}%)`
        }

        next.addEventListener('click', () => {
            chgID++
            chgID = chgID > swiperDiv.length - 1 ? swiperDiv.length - 1 : chgID
            btnCommon()
        })
        prev.addEventListener('click', () => {
            chgID--
            chgID = chgID < 0 ? 0 : chgID
            btnCommon()
        })

---

总结

以上为全部内容，仅供参考交流学习