透明度轮播图和滚动轮播图

最新推荐文章于 2021-05-30 18:44:14 发布

KarrieL

最新推荐文章于 2021-05-30 18:44:14 发布

阅读量213

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Lei190/article/details/112261171

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js动画

使用的时候请自行修改图片，不然无法显示。

代码示例:

透明度轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .slider{
            width: 700px;
            height: 400px;
            border: 2px red solid;
            position: relative;
        }
        ul{
            list-style: none;
        }
        .item{
            /* width: 700px;
            height: 400px; */
            position: absolute;
            left: 0px;
            top: 0px;
            opacity: 0;
        }
        .item img{
            width: 700px;
            height: 400px;
            display: block;
        }
        .slider .list .item:first-of-type{
            opacity: 1;
        }
        .slider .next, .slider .prev{
            position: absolute;
            top: 230px;
        }
        .slider .next{
            right: 0px;
        }
        .slider .pagination{
            position: relative;
            top: 300px;
            display: flex;
            flex-direction: row;
            margin-left: 250px;
            margin-top: 50px;
        }

        .slider .pagination .bullet{
            width: 20px;
            height: 20px;
            background-color: black;
            margin-left: 5px;
            border: 2px yellow solid;
            cursor: pointer;
            color: white;
        }

        .slider .bullet.focus{
            background-color: hotpink;
        }
    </style>
    <script  src="./animation.js"></script>
    <script>
        window.onload = function(){
            var id;     // 
            var prevIndex,nextIndex;
            var len;
            init();     
            // 实现初始化，对个个按钮，标签设置事件，并调用自动播放函数
            function init(){
                // 获取图片列表的长度
                len = document.getElementsByClassName("item").length

                // 获取到两个按钮
                let prevBtn = document.getElementById("btn1");
                let nextBtn = document.getElementById("btn2");
                // 对播放上一张按钮添加事件
                prevBtn.onclick = function(){
                    sliderPrev();
                }
                // 对播放下一张按钮添加事件
                nextBtn.onclick = function(){
                    sliderNext();
                }
                // 初始化，因为我们默认是从第一张开始，所以都初始化为0
                prevIndex = 0; 
                nextIndex = 0;

                // 实现点击焦点切换图片
                let bullets = document.getElementsByClassName("bullet");
                for(let i=0; i<bullets.length; i++){
                    bullets[i].index = i;
                    bullets[i].onclick = function(){
                        prevIndex = nextIndex;
                        nextIndex = this.index;
                        sliderTo(prevIndex,nextIndex);
                    }
                }
                // 添加自动播放事件
                let slider =  document.getElementsByClassName("slider")[0];
                auto();
                // 当鼠标移入外部框架slider的时候，停止自动播放
                slider.onmouseover = function(){
                    stop();
                }
                // 当鼠标移出外部框架slider的时候，开始自动播放
                slider.onmouseout = function(){
                    auto();
                }

            }

            // 切换到前一张图片 
            function sliderPrev(){
                // prevIndex每次都定位到当前播放的图片
                prevIndex = nextIndex;
                // 因为是播放前一张，所以nextIndex--
                nextIndex--;
                // 判断是否出界
                if( nextIndex == -1 ){
                    nextIndex = len-1;
                }
                // 调用换图函数
                sliderTo(prevIndex,nextIndex);
            }

            // 切换到后一张图片 
            function sliderNext(){
                // prevIndex每次都定位到当前播放的图片
                prevIndex = nextIndex;
                // 因为是播放后一张，所以nextIndex++
                nextIndex++;
                // 判断是否出界
                if( nextIndex == len ){
                    nextIndex = 0;
                }
                // 调用换图函数
                sliderTo(prevIndex,nextIndex);

            }
            
            // 换图函数
            function sliderTo(prev,next){
                let lis = document.getElementsByClassName("item")
                let bullets = document.getElementsByClassName("bullet")
                // prev指向当前播放的图片，next指向下一张要播放的图片
                // 把当前正在播放的图片的焦点中的focus类去掉，并给下一张要播放的图片的焦点添加focus类
                bullets[prev].className = "bullet";
                bullets[next].className = "bullet focus";
                // 把当前正在播放的图片的透明度调整为0，并把下一张要播放的图片的透明度调整为1
                animate(lis[prev],{opacity:0})
                animate(lis[next],{opacity:100})
            }
            // 自动播放函数
            function auto(){
                // 每次调用前先清除以前的自动调用，防止多次自动调用造成错误
                clearInterval(id);
                id = setInterval(function(){
                    sliderNext();
                },3000)
            }

            // 停止自动调用
            function stop(){
                clearInterval(id);
            }

        }
    </script>
</head>
<body>
    <!--外部框架--> 
    <div class="slider">
        <!--图片列表，一般图片列表的大小跟外框架一样大-->
        <ul class="list"> 
            <li class="item"> <img src="./images/img1.jpg" alt=""> </li>
            <li class="item"> <img src="./images/img2.jpg" alt=""> </li>
            <li class="item"> <img src="./images/img3.jpg" alt=""> </li>
            <li class="item"> <img src="./images/img4.jpg" alt=""> </li>
        </ul>
        <!--创建两个按钮，一个显示上一张，一个显示下一张-->
        <button id="btn1" class="prev">prev</button>
        <button id="btn2" class="next">next</button>
        <!--创建四个焦点，注意因为我们默认点开页面时候显示第一张，所以直接给第一张图片的class赋多一个focus-->
        <ul class="pagination">     
            <li id="first" class="bullet focus">1</li>  
            <li class="bullet">2</li>
            <li class="bullet">3</li>
            <li class="bullet">4</li>
        </ul>
    </div>
</body>
</html>

滚动式轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
        }
        .slider{
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
            border: 2px red solid;
        }
        .list{
            position: absolute;
        }
        .item{
            width: 700px;
            height: 400px;
            float: left;
        }
        .item img{
            width: 700px;
            height: 400px;
            display: block;
        }
        .prev,.next{
            position: absolute;
            top: 200px;
            width: 50px;
            height: 30px;
            border-radius: 2px;
            border: sienna solid;
        }
        .next{
            right: 0px;
        }
        .pagination{
            position: relative;
            top: 360px;
            left: 260px;
            display: flex;
            flex-direction: row;
        }
        .pagination .bullet{
            width: 20px;
            height: 20px;
            background-color: black;
            margin-left: 5px;
            border: 2px yellow solid;
            cursor: pointer;
            color: white;
        }
        .focus{
            background-color: yellow !important;
        }

    </style>
    <script src="./animation.js"></script>
    <script>
        window.onload = function(){
            // 
            var curredtIndex;
            var liWidth;
            var len;
            var id;
            init();
            function init(){
                curredtIndex = 1;

                let li_first = document.getElementsByClassName("item")[0];
                let copy_first = li_first.cloneNode(true);
                let temList = document.getElementsByClassName("item");

                let li_last = temList[temList.length-1];
                let copy_last = li_last.cloneNode(true);

                let list = document.getElementsByClassName("list")[0];
                list.appendChild(copy_first);
                list.insertBefore(copy_last,li_first)

                let lis =  document.getElementsByClassName("item");

                liWidth = lis[0].offsetWidth;
                len = lis.length;

                // 因为起始位置是第一张，所以要先设置一下
                list.style.left = -liWidth+"px";

                list.style.width = parseInt(liWidth)*len + "px"

                let prevBtn = document.getElementsByClassName("prev")[0];
                let nextBtn = document.getElementsByClassName("next")[0];
                prevBtn.onclick = function(){
                    sliderPrev();
                }
                nextBtn.onclick = function(){
                    sliderNext();
                }

                let bullets = document.getElementsByClassName("bullet");
                for(let i=0; i<bullets.length; i++){
                    bullets[i].index = i;
                    bullets[i].onclick = function(){
                        curredtIndex = this.index + 1;
                        sliderTo(curredtIndex);
                    }
                }
                auto()
                let slider  = document.getElementsByClassName("slider")[0];
                slider.onmouseover = function(){
                    stop()
                }
                slider.onmouseout = function(){
                    auto()
                }

            } 
            function sliderNext(){
                curredtIndex++;
                sliderTo(curredtIndex);
            }
            function sliderPrev(){
                curredtIndex--;
                sliderTo(curredtIndex);
            }

            function sliderTo(index){
                let list = document.getElementsByClassName("list")[0];
                let bullets = document.getElementsByClassName("bullet");
                let focusBullet = document.getElementsByClassName("focus")[0];
                let focusIndex ;

                if(index == len){
                    curredtIndex = index = 2;
                    list.style.left = -liWidth+"px";
                }
                
                if(index == -1){
                    curredtIndex = index = len-3;
                    list.style.left = -(len - 2)*liWidth + "px";
                }
                
                if(index == 0){
                    focusIndex = bullets.length - 1;
                }else if(index ==  len - 1){
                    focusIndex = 0;
                }else{
                    focusIndex = index - 1;
                }

                focusBullet.className = "bullet"
                bullets[focusIndex].className = "bullet focus"

                let leftDitance = -index*liWidth;
                animate(list, {left: leftDitance})


            }
            function auto(){
                clearInterval(id)
                id = setInterval(function(){
                    sliderNext();
                },3000)
            }
            function stop(){
                clearInterval(id)
            }

        }
    </script>
</head>
<body>
    <div class="slider">
        <ul class="list">
            <li class="item"> <img src="./images/img1.jpg" alt=""> </li>
            <li class="item"> <img src="./images/img2.jpg" alt=""> </li>
            <li class="item"> <img src="./images/img3.jpg" alt=""> </li>
            <li class="item"> <img src="./images/img4.jpg" alt=""> </li>
        </ul>
        <button class="prev"> prev </button>
        <button class="next"> next </button>
        <ul class="pagination">
            <li class="bullet focus"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
        </ul>
    </div>
    
</body>
</html>

animation.js代码如下:

function getStyle(elem, property){
    if(getComputedStyle){
        return getComputedStyle(elem)[property];
    }else{
        return elem.currentStyle[property];
    }
}

function animate(elem, properties){
    clearInterval(elem.timerId);
    elem.timerId =  setInterval(function(){

        for(let property in properties){
            let target = properties[property];

            let current;
            if(property == "opacity"){
                current = Math.round(parseFloat(getStyle(elem, "opacity")*100))
            }else{
                current = parseInt(getStyle(elem, property));
            }

            let speed = (target - current) / 30;
            
            if(speed > 0){
                speed = Math.ceil(speed);
            }else{
                speed= Math.floor(speed);
            }
            if(property == "opacity"){
                elem.style[property] = (current + speed)/100;
            }else {
                elem.style[property] = current + speed + "px";
            }
        }

    },20)

}

KarrieL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
透明度轮播图和滚动轮播图

js动画使用的时候请自行修改图片，不然无法显示。代码示例:透明度轮播图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫

专栏目录