css上下左右箭头切换图片

CSS上下左右箭头切换图片是网站中常用的交互效果，本文将介绍如何利用CSS实现这一效果。

 HTML结构：
    <div class="slider">
        <img src="img1.jpg">
        <img src="img2.jpg">
        <img src="img3.jpg">
        <img src="img4.jpg">
    </div>

    CSS样式：
    .slider {
        position: relative;
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    .slider img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.5s;
    }
    .slider img:first-child {
        opacity: 1;
    }

    .slider:hover img {
        opacity: 0.5;
    }
    .slider:hover img:hover {
        opacity: 1;
    }

    .slider:hover .arrow {
        display: block;
    }
    .slider .arrow {
        display: none;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        width: 40px;
        height: 40px;
        background: #fff url(arrow.png) no-repeat center center;
        cursor: pointer;
    }
    .slider .arrow.left {
        left: 10px;
        transform: rotate(180deg);
    }
    .slider .arrow.right {
        right: 10px;
    }

    JavaScript代码：
    var slider = document.querySelector('.slider');
    var imgs = slider.querySelectorAll('img');
    var arrows = slider.querySelectorAll('.arrow');
    var index = 0;
    arrows[0].addEventListener('click', function() {
        index--;
        if(index < 0) index = imgs.length - 1;
        changeImg();
    });
    arrows[1].addEventListener('click', function() {
        index++;
        if(index >= imgs.length) index = 0;
        changeImg();
    });
    function changeImg() {
        imgs.forEach(function(img, i) {
            if(i === index) {
                img.style.opacity = '1';
            } else {
                img.style.opacity = '0';
            }
        });
    } 

在HTML结构中，我们创建了一个包含多张图片的div容器，每张图片的opacity属性都设置为0，表示透明。在CSS样式中，我们通过position和opacity属性，使每张图片的位置重叠在一起，hover时设置opacity为1，显示当前图片，同时应用了CSS3的transition属性实现图片切换的动态效果。同时，我们使用绝对定位和CSS3的transform属性实现了箭头的显示和隐藏，当鼠标移动到容器上时才显示。

在JavaScript代码中，我们首先获取了所有图片和箭头元素，通过绑定click事件，控制图片的显示和隐藏，实现了翻页功能。