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

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

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

    ×
    
    
    < 
    >

 这里我把连个箭头的样式及鼠标移入时的样式写了下，本来想把箭头进入时隐藏，当我移动到旁边的时候才显示出来的，写了个#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";
}

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

      这里我还是抓取当前的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;
}

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

    
    




    

        

            
            
            
            
        
        

            1
            2
            3
        
        

            ×
            
            
            < 
            >
        
        < 
        >