JavaScript实战018：滑动轮播图+图片弹窗

最新推荐文章于 2023-05-26 16:02:20 发布

ProgramNotes

最新推荐文章于 2023-05-26 16:02:20 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/kevinfan2011/article/details/86704934

版权

JavaScript 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前面分别实现了滑动轮播图和图片弹窗功能，接着我将这两个功能合并到一块，实现我前面说的功能，当我点击轮播中图片时能将图片弹出，达到放大的效果，下面是结合之后的效果图动画。

有了前面的基础，这个功能实现并不难，首先弹出是相对于浏览器进行设定的，所以这一部分的代码完全可以移植过来使用，从新规划下结构即可，现在的HTML结构就是这样的。

<body>
    <div class="Carousel">
        <div id="picture">
            <img src="../src/assets/images/1.png" alt="">
            <img src="../src/assets/images/2.png" alt="">
            <img src="../src/assets/images/3.png" alt="">
            <img src="../src/assets/images/1.png" alt="">
        </div>
        <div class="page">
            <span class="show">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div id="magnify">   //新增放大窗口
            <span class="close">&times;</span>
            <img class="content">
            <span class="describe"></span>
        </div>
        <a href="javascript:;" class="arrow arrow_left"><</a>
        <a href="javascript:;" class="arrow arrow_right">></a>
    </div>
</body>

CSS样式同样可以直接移植过来使用，我们只需要用到的这一部分样式即可，直接放在原有样式下面即可。

<style type="text/css">
//************前面的省略**************
#magnify {
    display: none;
    position: fixed;
    z-index: 3;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ebe7e7;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover,.close:focus {
    color: rgb(156, 153, 153);
    text-decoration: none;
    cursor: pointer;
}
.content {
    margin: auto;
    display: block;
    max-width: 800px;
    width: 80%;
}
.describe {
    margin: auto;
    display: block;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
}
.content,.describe {
    -webkit-animation-name: Eject;
    -webkit-animation-duration: 0.6s;
    animation-name: Eject;
    animation-duration: 0.6s;
}
@-webkit-keyframes Eject {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}
@keyframes Eject {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}
</style>

接下来就是处理交互事件了，这里和之前的图片弹窗不一样的是这次是多张图片，所以这次JavaScript需要适当的修改一下了，同样先要获取当前的DOM元素，然后对轮播的图片进行遍历，在遍历中执行点击事件，这样我们就可以实现我们的轮播+弹窗效果了。

var pic = document.getElementById('picture');
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
var Carousel = document.querySelector(".Carousel");
var pages = document.getElementsByTagName('span');
var magnify = document.getElementById('magnify');
var close = magnify.children[0];
var magnifyImg = magnify.children[1];
var describe = magnify.children[2];
var imgwidth = pic.children[0].offsetWidth;
var move = 0;
var index = 0;
for (var i = 0; i < pic.children.length; i++) {
    pic.children[i].onclick = function () {
        magnify.style.display = "block";
        magnifyImg.src = this.src;
        describe.innerHTML = this.alt;
    }
}
close.onclick = function () {
    magnify.style.display = "none";
}

这里遇到一个小问题，当我将鼠标移到关闭按钮的时候，关闭按钮消失了导致无法点击关闭，后台提示Uncaught TypeError: Cannot set property 'className' of undefined，at showPage (JS滑动轮播+弹窗.html:296)，at JS滑动轮播+弹窗.html:289

查看对应的代码发现与之前写的showPage()方法中的span标签有点小冲突，这里把close的span标签改成其他标签就可以了（我换成了a标签），下一步我想再完善一下，弹出之后图片是全屏显示的，如果想换一张的话需要先关闭当前窗口然后在选择其他图片，这种操作还不够人性化，所以我想在弹窗中也添加两个左右键按钮，然后通过点击弹窗中的左右按钮实现图片的切换。

<div id="magnify">
    <a href="javascript:;" class="close">&times;</a>
    <img class="content">
    <span class="describe"></span>
</div>

下面是滑动轮播图+图片弹窗的完整代码，有兴趣的可以试试。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Picture Carousel</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.Carousel {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 50px auto;
    overflow: hidden;
    border: 10px solid rgba(189, 184, 184, 0.5);
    z-index: 1;
}

#picture {
    position: absolute;
    width: 2400px;
    height: 400px;
}

#picture img {
    float: left;
    width: 600px;
    height: 400px;
    cursor: pointer;
}

#picture img:hover {
    opacity: 0.5;
}

.Carousel .page {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    height: 10px;
    z-index: 2;
}

.Carousel .page span {
    display: inline-block;
    width: 30px;
    line-height: 30px;
    width: 30px;
    margin-left: 20px;
    text-align: center;
    font-weight: 900;
    color: white;
    background: rgba(111, 112, 112, 0.6);
    cursor: pointer;
}

.Carousel .page span.show {
    background-color: rgb(15, 151, 241);
}

.Carousel .arrow {
    cursor: pointer;
    position: absolute;
    top: 40%;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    font-size: 50px;
    z-index: 2;
    color: rgb(161, 157, 157);
    font-weight: bold;
    display: none;

}

.Carousel .arrow_left {
    left: 0;
}

.Carousel .arrow_right {
    right: 0;
}

.Carousel:hover .arrow {
    display: block;
}

.Carousel .arrow:hover {
    background-color: rgb(15, 151, 241);
    font-weight: bold;
    color: white;
}

#magnify {
    display: none;
    position: fixed;
    z-index: 3;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ebe7e7;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: rgb(156, 153, 153);
    text-decoration: none;
    cursor: pointer;
}

.content {
    margin: auto;
    display: block;
    max-width: 800px;
    width: 80%;
}

.describe {
    margin: auto;
    display: block;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
}

.content,
.describe {
    -webkit-animation-name: Eject;
    -webkit-animation-duration: 0.6s;
    animation-name: Eject;
    animation-duration: 0.6s;
}

@-webkit-keyframes Eject {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes Eject {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}
</style>
</head>

<body>
    <div class="Carousel">
        <div id="picture">
            <img src="../src/assets/images/1.png" alt="">
            <img src="../src/assets/images/2.png" alt="">
            <img src="../src/assets/images/3.png" alt="">
            <img src="../src/assets/images/1.png" alt="">
        </div>
        <div class="page">
            <span class="show">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div id="magnify">
            <a class="close">&times;</a>
            <img class="content">
            <em class="describe"></em>
        </div>
        <a href="javascript:;" class="arrow arrow_left"><</a> 
        <a href="javascript:;" class="arrow arrow_right">></a>
    </div>
</body>
<script type="text/javascript">
    var pic = document.getElementById('picture');
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    var Carousel = document.querySelector(".Carousel");
    var pages = document.getElementsByTagName('span');
    var magnify = document.getElementById('magnify');
    var close = magnify.children[0];
    var magnifyImg = magnify.children[1];
    var describe = magnify.children[2];
    var imgwidth = pic.children[0].offsetWidth;
    var move = 0;
    var index = 0;
    for (var i = 0; i < pic.children.length; i++) {
        pic.children[i].onclick = function () {
            magnify.style.display = "block";
            magnifyImg.src = this.src;
            describe.innerHTML = this.alt;
        }
    }
    close.onclick = function () {
        magnify.style.display = "none";
    }
    for (var i = 0; i < pages.length; i++) {
        pages[i].onmouseover = function () {
            move = this.innerHTML - 1;
            index = move;
            if (move == pic.children.length - 1) {
                move = 0;
                pic.style.left = 0 + "px";
            }
            animate(pic, -move * imgwidth);
        }
    }
    
    next.onclick = function () {
        if (move == pic.children.length - 1) {
            move = 0;
            pic.style.left = 0 + "px";
        }
        move++;
        animate(pic, -move * imgwidth);
        index++;
        if (index > 2) {
            index = 0;
        }
        console.log("index=" + index)
    }
    prev.onclick = function () {
        if (move == 0) {
            move = pic.children.length - 1;
            pic.style.left = -move * imgwidth + "px";
        }
        move--;
        animate(pic, -move * imgwidth);
        index--;
        if (index < 0) {
            index = 2;
        }
        console.log("index=" + index)
    }
    var timer = null;
    function autoPlay() {
        timer = setInterval(function () {
            next.onclick();
        }, 2000);
    }
    autoPlay();

    Carousel.onmouseenter = function () {
        clearInterval(timer);
    }
    Carousel.onmouseleave = function () {
        autoPlay();
    }
    function animate(element, distance) {
        clearInterval(element, timer)
        element.timer = setInterval(function () {
            var present = element.offsetLeft;//获取元素的当前的位置
            var movement = 10;//每次移动的距离
            movement = present < distance ? movement : -movement;
            present += movement;//当前移动到位置
            if (Math.abs(present - distance) > Math.abs(movement)) {
                element.style.left = present + "px"
            } else {
                clearInterval(element.timer);
                element.style.left = distance + "px"
            }
            showPage()
        }, 10);
    }
    function showPage() {
        for (var i = 0; i < pages.length; i++) {
            pages[i].className = '';
        }
        pages[index].className = 'show';
    }
</script>
</html>