使用JavaScript完成网易云轮播图效果

最新推荐文章于 2022-12-04 10:35:59 发布

陈老说

最新推荐文章于 2022-12-04 10:35:59 发布

阅读量441

点赞数

文章标签：明哥山月剧 javascript 网易云轮播实现有趣的案例 html+

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123607912

版权

效果图：

使用JavaScript自动定义函数完成轮播淡入的效果

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'/>
    <title>轮播</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 1349px;
        }

        #container {
            width: 1349px;
            height: 336px;
            background-color: black;
        }

        #photos {
            margin: 0;
            position: absolute;
            left: 200px;
            width: 730px;
            height: 336px;
        }

        .pictures {
            position: absolute;
            width: 730px;
            height: 336px;
            list-style: none;
        }

        #arrows {
            position: absolute;
            width: 800px;
            height: 336px;
            margin-top: 130px;
            margin-left: -30px;
        }

        .arrow {
            font-size: 2.5em;
            background-color: rgb(144, 144, 144, 0.1);
            color: white;
            width: 30px;
            cursor: pointer;
        }

        #buttons {
            position: absolute;
            margin-top: -10px;
            margin-left: 560px;
            z-index: 4;
        }

        .button {
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background-color: grey;
            float: left;
            margin-right: 6px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id='container'>
    <ul id='photos'>
        <li class='pictures' id='#000000' style='z-index: 2;'><img src='./img/title-1.jpg' alt="#"></li>
        <li class='pictures' id='#102329'><img src='./img/title-2.jpg' alt="#"></li>
        <li class='pictures' id='#010006'><img src='./img/title-3.jpg' alt="#"></li>
        <li class='pictures' id='#111A29'><img src='./img/title-4.jpg' alt="#"></li>
        <li class='pictures' id='#38373D'><img src='./img/title-5.jpg' alt="#"></li>
        <li class='pictures' id='#F3EDED'><img src='./img/title-6.jpg' alt="#"></li>
        <li class='pictures' id='#188987'><img src='./img/title-7.jpg' alt="#"></li>
        <div id='arrows'>
            <span class='arrow' title='left'><</span>
            <span class='arrow' title='right' style='float: right;'>></span>
        </div>
    </ul>
</div>
<div id='buttons'>
    <span class='button' style='background-color: red;'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
</div>
<script>
    let count = 0;  //定义图片变更次数
    let FI = null; //存储淡入interval循环
    let timer = null;//存储轮播interval循环
    let fullBox = document.getElementById('container');//用于设置背景颜色
    let pictures = document.getElementsByClassName('pictures');//存储图片
    let arrow = document.getElementsByClassName('arrow');//存储 page左右箭头
    let button = document.getElementsByClassName('button');//存储下部圆圈
    let percent = 0;//淡入循环变量
    function fadeIn() {//淡入函数
        FI = setInterval(function () {
            percent += 0.010000; //精确浮点数精度
            if (percent >= 1) {
                clearInterval(FI);
            } else {
                pictures[count].style.opacity = percent;
            }
        }, 10);
        percent = 0;
    }

    function pic() {    //  图像变换函数
        for (let i = 0; i < pictures.length; i++) {
            pictures[i].style.opacity = "0";
        }
        //  所有图片透明
        fullBox.style.backgroundColor = pictures[count].id //   背景图片颜色等于相应图片的id
        for (let c = 0; c < button.length; c++) { //    底部按钮颜色变化
            button[c].style.backgroundColor = 'grey';
        }

        button[count].style.backgroundColor = 'red';
    }

    //主轮播循环
    showtime();

    function showtime() {
        timer = setInterval(show, 4000)
    }

    function show() {//轮播循环函数
        count++;
        if (count > pictures.length - 1) {
            count = 0;
        }

        fadeIn();
        pic();
    }

    //  page左右箭头
    for (let i = 0; i < arrow.length; i++) {
        arrow[i].onmouseover = function () {
            clearInterval(timer);
        };
        arrow[i].onmouseout = function () {
            showtime();
        };
        arrow[i].onclick = function () {
            if (this.title === 'left') {
                count--;
                if (count < 0) {
                    count = pictures.length - 1;
                }
            } else {
                count++;
                if (count > pictures.length - 1) {
                    count = 0;
                }
            }
            fadeIn();
            pic();
        }
    }
    //底部圆点
    for (let i = 0; i < button.length; i++) {
        button[i].index = i;
        button[i].onmouseover = function () {
            clearInterval(timer);
            count = this.index;//确保count值不会出错
            fadeIn();
            pic();
        };
        button[i].onmouseout = function () {
            showtime()
        };
    }
</script>
</body>
</html>

源码+图片资源下载：点我下载

陈老说

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用JavaScript完成网易云轮播图效果

效果图：使用JavaScript自动定义函数完成轮播淡入的效果源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset='utf-8'/> <title>轮播</title> <style> body { margin: 0; padding: 0; .
复制链接

扫一扫