静态页面+轮播图

最新推荐文章于 2023-05-07 01:24:12 发布

MaNqo

最新推荐文章于 2023-05-07 01:24:12 发布

阅读量2.5k

点赞数 11

文章标签： js dom html javascript

本文链接：https://blog.csdn.net/MaNqo/article/details/115031660

版权

轮播图制作步骤

实现效果：

在这里插入图片描述

插入几张图片，还有向前和向后的按钮
插入列表的小圆点
调间隔，样式，前后图片的位置
但向前向后的按钮触发之后的事件
点击小圆点后触发的事件
当鼠标移动到小圆点上发生的事件
隐藏小圆点(hover)
添加一个定时器，让图片自动轮播（点击时重置定时器）
点击左右图片后也会触发跟点击按钮一样的事件，提高用户体验（需要让左中右的图片分开在不同盒子中，我在做这个部分的时候才发现我前面CSS代码写出来的效果是让中间和右边的图片在同一个盒子中）

涉及到的知识点：html和css排版页面、dom元素的操作、ajax获取图片、

附上轮播图的代码
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>Ajax引入图片</title>
    <link rel="stylesheet" href="../css/m.css" />
    <script src="../js/myAjax.js"></script>

</head>

<body>
    <div class="wrap">
        <button type="button" class="btn" id="goPre">&lt</button>
        <button type="button" class="btn" id="goNext">&gt</button>
    </div>


</body>

<script src="../js/getImg2.js"></script>
<!-- <script src="../js/test.js"></script> -->

</html>

css

* {
    padding: 0;
    margin: 0;
}
body {
    width: 100%;
}
.wrap {
    position: relative;
}
.list {
    margin-left: 80px;
    list-style: none;
}
.wrap .item {
    width: 800px;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
}
.wrap .item img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.btn {
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 100;
    background-color: rgba(0,0,0,0.3);
    color: rgb(223, 223, 223);
    font-size: 20px;
    border-radius: 100%;
    border-color: transparent;
    top: 190px;
    outline: none;
    display: none;
}
/* :hover .btn {
    display: block;
} */
#goPre {
    left: -60px;
}
#goNext {
    right: -80px;
}
.item.active {
    z-index: 10;
    opacity: 1;
}
.item.active img {
    width: 800px;
    height: 400px;
    transition: all 0.5s;
}
.pointList {
    list-style: none;
    z-index: 100;
    padding-left: 410px;
    text-align: center;
    padding-top: 420px;
}
.point {
    width: 6px;
    height: 6px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 100%;
    float: left;
    margin-right: 10px;
    cursor: pointer;
}
.point.active {
    position: relative;
    z-index: 100;
    background-color: rgb(236, 65, 65);
}

/* 接下来做前后图在两侧 */
.list .item.left {
    position: absolute;
    z-index: 1;
    width: 500px;
    height: 250px;
    transform: translate(-200px, 75px);
    opacity: 1;
}
 
.list .item.right {
    position: absolute;
    z-index: 1;
    width: 500px;
    height: 250px;
    transform: translate(500px, 75px);
    opacity: 1;
}

window.onload = function () {
    var items = document.getElementsByClassName('item'); //图片
    var points = document.getElementsByClassName('point'); //点
    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');
    var wrap = document.querySelector('.wrap');

    var index = 0; //表示第几张图片
    var timer;

    var clearActive = function () {
        for (var i = 0; i < items.length; i++) {
            // items[i].className = 'item';
            if (items[i].className == 'item left' && i != items.length - 2 && i != items.length - 1) {
                items[i].className = 'item';
                items[i + 1].className = 'item';
                items[i + 2].className = 'item';
            } else if (items[i].className == 'item left' && i == items.length - 2) {
                items[i].className = 'item';
                items[i + 1].className = 'item';
                items[0].className = 'item';
            } else if (items[i].className == 'item left' && i == items.length - 1) {
                items[i].className = 'item';
                items[0].className = 'item';
                items[1].className = 'item';
            }
        }
        for (var i = 0; i < points.length; i++) {
            points[i].className = 'point';
        }
    }

    var goIndex = function () {
        clearActive();
        points[index].className = 'point active';
        items[index].className = 'item active';
    }
    var goLeft = function () {
        if (index == 0) {
            items[items.length - 1].className = 'item left';
        } else if (index == items.length - 1) {
            items[items.length - 2].className = 'item left';
        } else {
            items[index - 1].className = 'item left';
        }
    }
    var goRight = function () {
        if (index == 0) {
            items[1].className = 'item right';
        } else if (index == items.length - 1) {
            items[0].className = 'item right';
        } else {
            // console.log('index=', index)
            index++;
            // console.log('index=', index)
            items[index].className = 'item right';
            index--;
        }
    }
    var goNext = function () {
        if (index < items.length - 1) {
            index++;
        } else {
            index = 0;
        }
        if (index == 0) {
            goIndex();
            items[items.length - 1].className = 'item left';
            items[index + 1].className = 'item right';
        } else if (index == items.length - 1) {
            goIndex();
            items[index - 1].className = 'item left';
            items[0].className = 'item right';
        } else {
            goIndex();
            items[index - 1].className = 'item left';
            items[index + 1].className = 'item right';
        }
    }
    var goPre = function () {
        if (index == 0) {
            index = items.length - 1;
        } else {
            index--;
        }
        if (index == 0) {
            goIndex();
            items[index + 1].className = 'item right';
            items[items.length - 1].className = 'item left';
        } else if (index == items.length - 1) {
            goIndex();
            items[index - 1].className = 'item left';
            items[0].className = 'item right';
        } else {
            goIndex();
            items[index - 1].className = 'item left';
            items[index + 1].className = 'item right';
        }
    }

    //添加左右按钮点击事件
    goNextBtn.addEventListener('click', function () {
        goNext();
    })
    goPreBtn.addEventListener('click', function () {
        goPre();
    })

    //定时器实现自动播放
    timer = setInterval(function () {
        index++;
        // console.log('index=', index);
        index %= points.length;
        goIndex();
        // console.log('goIndex=', index);
        goLeft();
        // console.log('goLeft=', index);
        goRight();
        // console.log('goRight=', index);
    }, 6000);

    //鼠标移入图片时清除定时器
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('mouseenter', function () {
            clearInterval(timer);
            timer = null;
        })
    }
    //鼠标移出图片时打开定时器
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('mouseleave', function () {
            timer = setInterval(function () {
                index++;
                index %= points.length;
                goIndex();
                goLeft();
                goRight();
            }, 6000);
        })
    }

    //鼠标经过显示
    wrap.addEventListener('mouseenter', function () {
        goPreBtn.style.display = 'block';
        goNextBtn.style.display = 'block';
    })
    wrap.addEventListener('mouseleave', function () {
        goPreBtn.style.display = 'none';
        goNextBtn.style.display = 'none';
    })

    //鼠标点击图片时实现跳转
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function () {
            var pointIndex = this.getAttribute('index');
            index = pointIndex;
            goIndex();
            goLeft();
            goRight();
        })
    }

    //点击小圆点后跳转到对应图片
    for (var i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function () {
            var pointIndex = this.getAttribute('data-index');
            // console.log(pointIndex);
            index = pointIndex;
            goIndex();
            goLeft();
            goRight();
        })
    }

    //鼠标置于小圆点上时跳转到对应图片
    for (var i = 0; i < points.length; i++) {
        points[i].onmouseover = function (event) {
            event = event || window.event;
            var pointIndex = this.getAttribute('data-index');
            index = pointIndex;
            goIndex();
            goLeft();
            goRight();
        }
    }
    console.log(items.length);
    console.log(items.length - 1);
}

MaNqo

关注

11
点赞
踩
77

收藏

觉得还不错? 一键收藏
8
评论
静态页面+轮播图

轮播图制作步骤实现效果：插入几张图片，还有向前和向后的按钮插入列表的小圆点调间隔，样式，前后图片的位置但向前向后的按钮触发之后的事件点击小圆点后触发的事件当鼠标移动到小圆点上发生的事件隐藏小圆点(hover)添加一个定时器，让图片自动轮播（点击时重置定时器）点击左右图片后也会触发跟点击按钮一样的事件，提高用户体验（需要让左中右的图片分开在不同盒子中，我在做这个部分的时候才发现我前面CSS代码写出来的效果是让中间和右边的图片在同一个盒子中）涉及到的知识点：html和css排版页面、
复制链接

扫一扫