原生js写透明度轮播

最新推荐文章于 2024-09-22 11:17:00 发布

置顶 web_Mike

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量299

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/web_Mike/article/details/103894237

版权

本文介绍如何利用原生JavaScript实现透明度轮播效果，主要涉及CSS、HTML和JavaScript代码。通过控制图片的透明度切换，实现轮播效果。关键在于正确处理边界条件，以确保轮播的平滑过渡。

摘要由CSDN通过智能技术生成

css代码

<style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #lbt {
            width: 400px;
            height: 400px;
            border: solid red 1px;
            overflow: hidden;
            position: relative;
            margin: 100px auto;
        }

        #lbt1 {
            width: 400px;
            height: 400px;
            position: relative;
        }

        #lbt1 img {
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 400px;
            opacity: 0;
        }

        #lbt1 .imgS {
            opacity: 1;
        }

        .ull {
            width: 60px;
            height: 20px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20px;
            margin: auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .ull li {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: blue;
            cursor: pointer;
        }

        .ull .active {
            background: red;
        }

        #lbt i {
            display: block;
            width: 30px;
            height: 40px;
            cursor: pointer;
        }

        #lbt i img {
            width: 100%;
        }

        #lbt i:nth-of-type(1) {
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            margin: auto;

        }

        #lbt i:nth-of-type(2) {
            position: absolute;
            right: 10px;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

html代码

<div id="lbt">
        <div id="lbt1">
            <img class="imgS" src="image/mj2 (1).jpg" alt="">
            <img src="image/mj2 (2).jpg" alt="">
            <img src="image/mj2 (3).jpg" alt="">
            <img src="image/mj2 (6).jpg" alt="">
        </div>
        <ul class="ull">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <i class="lefts"><img src="./image/zjt.jpg"></i>
        <i class="rights"><img src="./image/yjt.jpg"></i>
    </div>

js代码

(function () {
        var prevIndex,nextIndex
        var len
        var times
        init()
        function init() {
            prevIndex = nextIndex = 0
            len = document.querySelectorAll('#lbt1 img').length
            var lefts = document.querySelector('.lefts')
            var rights = document.querySelector('.rights')
            var list = document.querySelectorAll('.ull li')
            var lbt = document.querySelector('#lbt')

            lefts.onclick = function(){
                toPrev()
            }
            rights.onclick = function(){
                toNext()
            }

            for(var i= 0; i<list.length; i++){
                list[i].index = i
                list[i].onmouseenter = function(){
                    prevIndex = nextIndex
                    nextIndex = this.index
                    toMotion(prevIndex,nextIndex)
                }
            }
            lbt.onmouseenter = function(){
                stop()
            }
            lbt.onmouseleave = function(){
                auto()
            }

        }

        function toPrev() {

            prevIndex = nextIndex
            nextIndex--
            if(nextIndex===-1){
                nextIndex = len - 1
            }
            toMotion(prevIndex,nextIndex)
        }

        function toNext() {
            prevIndex = nextIndex
            nextIndex++
            if(nextIndex===len){
                nextIndex = 0
            }
            toMotion(prevIndex,nextIndex)
        }

        function toMotion(prev,next) {
            var oImg = document.querySelectorAll('#lbt1 img')
            var list = document.querySelectorAll('.ull li')
            list[prev].className = ''
            list[next].className = 'active'
            motion(oImg[prev],{opacity:0})
            motion(oImg[next],{opacity:100})

        }
        function auto(){
            clearInterval(times)
            times = setInterval(()=>{
                toNext()
            },2000)
           
        }
        function stop(){
            clearInterval(times)
        }


    })()

这是封装的运动函数motion

function getStyle(ele, property) {
    if (getComputedStyle) {
        return getComputedStyle(ele, null)[property]
    } else {
        return ele.currentStyle[property]
    }
}
function motion(ele, propertyS,fn) {
    clearInterval(ele.timer)
    ele.timer = setInterval(() => {
        var flag = 1
        for (property in propertyS) {
            var values
            var target = propertyS[property]

            if (property === 'opacity') {
                values = Math.round(parseFloat(getStyle(ele, property)) * 100)
            } else {
                values = parseInt(getStyle(ele, property))
            }

            var speed = (target - values) / 30
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)

            values += speed
            if(property === 'zIndex'){
                values = target
            }
            if(values!=target){
                flag = 0
            }
            if (property === 'opacity') {
                ele.style.opacity = values / 100
            } else if(property === 'zIndex'){
                ele.style.zIndex = values
            } else {
                ele.style[property] = values + 'px'
            }
        }

        if(flag){
            fn&&fn()
            clearInterval(ele.timer)
        }
    }, 10)
}

其实轮播图的原理很简单，就是图片的透明度切换，难点在于边界条件的判断，这个搞清楚了就可以写出来了