JS实战006:在滑动轮播图弹窗中增加图片切换功能

其他 2019-04-06 16:01:11 阅读次数: 0
版权声明：以上内容为本人原创，如需转载，请注明出处，谢谢！ https://blog.csdn.net/kevinfan2011/article/details/86707841

      前面把滑动轮播和图片弹窗完美的结合在了一起，效果还是很不错的，但是还是感觉缺了点，弹出之后图片是全屏显示的，如果想换一张的话需要先关闭当前窗口然后在选择其他图片，这种操作还不够人性化，所以我想在弹窗中也添加两个左右键按钮，然后通过点击弹窗中的左右按钮实现图片的切换，如下图的样子。

     说干咱就开始撸代码，首先我们要把样式给写出来，我在magnify中添加连个a标签，表示放大之后的箭头，同样给他们定义两个class属性，把两者相同的部分写在close_arrow中，不同的分别写在left和right中。

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

 这里我把连个箭头的样式及鼠标移入时的样式写了下，本来想把箭头进入时隐藏，当我移动到旁边的时候才显示出来的，写了个#magnify:hover .close_arrow{display:block}，结果发现只有移出浏览器窗口的时候箭头才会消失，这并不是我想要的效果。

.close_arrow{
    cursor: pointer;
    position: absolute;
    top: 40%;
    padding: 10px 25px;
    background-color: rgba(10, 10, 10, 0.8);
    display: inline-block;
    border-radius: 50%;
    font-size: 50px;
    z-index: 3;
    color: rgb(161, 157, 157);
    font-weight: bold;
    display: none;
    opacity: 0.5;
}
/*#magnify:hover .close_arrow{
    display: block;   //效果不理想，注释掉了
}*/
#magnify .close_arrow:hover{
    background-color: rgb(15, 151, 241);
    font-weight: bold;
    color: white;
}
#magnify .left{
    left:40px;
}
#magnify .right{
    right:40px;
}

      我个人的体验来说应该是当我点击图片放大的时候，箭头是隐藏的（避免视线干扰），当我将鼠标移出图片时箭头才显示，再次移回图片上时又消失，说着说着好像这个关闭也是这么回事呀，改了。

        这样就没法直接在CSS上完成操作了，所以这里要写个JavaScript了，给我们的图片添加个鼠标移入/移出事件，下面这样效果是不是感觉好多了。

    实现的方法就是获取当前图片的DOM元素，然后给它设定两个两个鼠标事件，当鼠标移入图片区域时关闭和箭头都因此起来，当我移出图片时则将其显示出来。

var arrow_obj=document.getElementsByClassName('close_arrow');
var magnify = document.getElementById('magnify');
var close = magnify.children[0];
var magnifyImg = magnify.children[1];
magnifyImg.onmouseleave=function(){
    arrow_obj[0].style.display="block";
    arrow_obj[1].style.display="block";
    close.style.display="block";
}
magnifyImg.onmouseenter=function(){
    arrow_obj[0].style.display="none";
    arrow_obj[1].style.display="none";
    close.style.display="none";
}

      显示效果解决了，接下来就是按钮的功能实现了，当我按下箭头时要不断的切换下一张图片出来，已开启我想直接调用前面写的切换按钮来着的，结果调用后发现并没有得到我想要的结果，而是在后台切换原来轮播中的图片，在放大的图中在轮播也没必要，所以我就想直接将原来的图片替换掉，这样就得到了下图的效果。

扫描二维码关注公众号，回复： 5795101 查看本文章

      这里我还是抓取当前的move值，然后先判断该值让它到了最后一张就循环回来，没有则继续往后加并把当前的图片赋给我们放大窗口中的图片，这样就完美的实现了在滑动轮播图弹窗中增加图片切换功能。

arrow_obj[0].onclick=function(){
    if (move == 0) {
        move = pic.children.length - 1;
        pic.style.left = -move * imgwidth + "px";
    }
    move--;
    magnifyImg.src= pic.children[move].src;
}
arrow_obj[1].onclick=function(){
    if (move == pic.children.length - 1) {
        move = 0;
        pic.style.left = 0 + "px";
    }
    move++;
    magnifyImg.src= pic.children[move].src;
}

下面是完整的代码，有兴趣的可以试试：

<!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;
    font-style: normal;
    display:none;

}
.close_arrow{
    cursor: pointer;
    position: absolute;
    top: 40%;
    padding: 10px 25px;
    background-color: rgba(10, 10, 10, 0.8);
    display: inline-block;
    border-radius: 50%;
    font-size: 50px;
    z-index: 3;
    color: rgb(161, 157, 157);
    font-weight: bold;
    display: none;
    opacity: 0.5;
}
/* #magnify:hover .close_arrow{
    display: block;
} */
#magnify .close_arrow:hover{
    background-color: rgb(15, 151, 241);
    font-weight: bold;
    color: white;
}
#magnify .left{
    left:40px;
}
#magnify .right{
    right:40px;
}
.close:hover,.close:focus {
    color: rgb(156, 153, 153);
    text-decoration: none;
    cursor: pointer;
}

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

.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">
            <i href="javascript:;" class="close">&times;</i>
            <img class="content">
            <span class="describe"></span>
            <a href="javascript:;" class="close_arrow left"><</a> 
            <a href="javascript:;" class="close_arrow right" >></a>
        </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 arrow_obj=document.getElementsByClassName('close_arrow');
    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;
    magnifyImg.onmouseleave=function(){
        arrow_obj[0].style.display="block";
        arrow_obj[1].style.display="block";
        close.style.display="block";
    }
    magnifyImg.onmouseenter=function(){
        arrow_obj[0].style.display="none";
        arrow_obj[1].style.display="none";
        close.style.display="none";
    }
    arrow_obj[0].onclick=function(){
        if (move == 0) {
            move = pic.children.length - 1;
            pic.style.left = -move * imgwidth + "px";
        }
        move--;
        magnifyImg.src= pic.children[move].src;
    }
    arrow_obj[1].onclick=function(){
        if (move == pic.children.length - 1) {
            move = 0;
            pic.style.left = 0 + "px";
        }
        move++;
        magnifyImg.src= pic.children[move].src;
    }
    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;
        }
    }
    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;
        }
    }
    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>

猜你喜欢

转载自blog.csdn.net/kevinfan2011/article/details/86707841
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022