轮播图CSS的实现及原理-黑山老妖

相当常见且简单的实现方法：

1、将所有的图片并排。

2、依次平移即可。

HMTL 和 CSS部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        ul,
        ol {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
 
        #main {
            width: 600px;
            height: 350px;
            margin: 30px auto;
            position: relative;
        }
 
        #display {
            width: 600px;
            height: 350px;
            overflow: hidden;
            position: relative;
            -webkit-user-select: none;
        }
 
        #display ul {
            position: relative;
            left: 0;
            top: 0px;
            width: 3600px;
            height: 350px;
            transition: left 500ms linear;
        }
 
        #list li {
            float: left;
            width: 600px;
            height: 350px;
        }
 
        #arrow {
            display: none;
        }
 
        #arrow span {
            position: absolute;
            width: 40px;
            height: 40px;
            line-height: 40px;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            font-family: 黑体, SimHei;
            font-size: 30px;
            color: #fff;
            opacity: 0.4;
            border: 1px solid #fff;
            -webkit-user-select: none;
        }
 
        #arrow span:hover {
            opacity: 0.7;
        }
 
        #arrow #right {
            right: 5px;
            left: auto;
        }
 
        #index_container {
            position: absolute;
            width: 210px;
            height: 30px;
            right: 20px;
            bottom: 20px;
        }
 
        #index_container .index {
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            opacity: 0.8;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
            -webkit-user-select: none;
        }
 
        #index_container .current {
            background: #ec3d3d;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div id="main">
        <div id="display">
            <ul id="list">
                <li><img src="images/0.jpg" width="600" height="350"/></li>
                <li><img src="images/1.jpg" width="600" height="350"/></li>
                <li><img src="images/2.jpg" width="600" height="350"/></li>
                <li><img src="images/3.jpg" width="600" height="350"/></li>
                <li><img src="images/4.jpg" width="600" height="350"/></li>
            </ul>
            <ol id="index_container"></ol>
            <div id="arrow">
                <span id="left" title="前一张"><</span>
                <span id="right" title="后一张">></span>
            </div>
        </div>
    </div>
</body>
</html>

<script>部分

window.onload = () => {
    let list = document.getElementById('list');
    let ol = document.getElementsByTagName('ol')[0];
    let display = document.getElementById('display');
    let currentIndex = 0;
    let autoPlay = () => {
        window.autoPlay = true;
        window.autoPlayTimer = setInterval(() => move((currentIndex + 1) % 5), 2000);
    }
    let stopPlay = () => {
        if (window.autoPlay) {
            window.autoPlay = false;
            clearInterval(window.autoPlayTimer);
        }
    }
    //创建索引按钮
    for (let i = 0; i < 5; i++) {
        let li = document.createElement('li');
        li.textContent = String(i + 1);
        li.className = 'index';
        if (i == 0) li.className += ' current';
        li.index = i;
        ol.appendChild(li);
        li.addEventListener('mouseover', function() {
            move(this.index);
            stopPlay();
        });
    }
    let arrow = document.getElementById('arrow');
    let showArrow = () => arrow.style.display = 'block';
    let hideArrow = () => arrow.style.display = 'none';
    //核心move函数
    let move = (index) => {
        let width = display.offsetWidth;
        for (let i = 0; i < 5; i++) {
            //改变当前索引按钮
            if ((index % 5) === i) {
                ol.children[i].className = 'index current';
            } else ol.children[i].className = 'index';
        }
        //移动lists
        list.style.left = (-index) * width + 'px';
        currentIndex = index;
    }
    display.addEventListener('mouseover', showArrow)
    display.addEventListener('mouseleave', () => {
        hideArrow();
        if (!window.autoPlay) {
            //重新开始自动播放
            autoPlay();
        }
    })
  
    let left = document.getElementById('left');
    let right = document.getElementById('right');
    left.addEventListener('click', () => {
        move((currentIndex - 1) === -1 ? 4 : currentIndex - 1);
        stopPlay();
    });
    right.addEventListener('click', () => {
        move((currentIndex + 1) % 5);
        stopPlay();
    });
 
    //启动自动播放
    move(0);
    autoPlay();
}

关键部分为 move()函数，即平移整个轮播图像列表( 根据跳转索引 index )。

效果如下：

目录CONTENT

轮播图CSS的实现及原理

评论区