HTML图片轮播

一、简介：

之前我也写过图片轮播的文章，写的不是很详细只有效果图片展示及相应的代码展示，而且js代码也写得很乱。这一次我又重新学习了一遍图片轮播，并对它进行了代码整理让你们更容易理解

二、文件目录：

三、图片素材：

四、图片轮播得二种方式：

第一种：
使用background: url()设置标签背景的方式，通过js对css样式进行修改实现图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 950px;
            height: 290px;
            margin: 0 auto;
            background: url("images/banner_01.jpg") no-repeat;
            background-size:contain;
            transition: all 1s;
            position: relative;
        }
        .icon_left{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 45%;
            left:20px;
        }
        .icon_right{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 45%;
            right:20px;
        }
    </style>
    <script>
        var i=1;//表示当前图片所在位置
        var time = setTimeout("showImg()", 2000);//启动时钟事件刷新时间 1000==1秒
        function icon_left(){
            clearTimeout(time)//清楚时钟事件
            if(i<=1){
                i=4;
            }else{
                i=i-2;
            }
            console.info(i)
            showImg()
        }
        function icon_right(){
            clearTimeout(time)//清楚时钟事件
            showImg()
        }
        function showImg() { //让背景图片显示
            i++;
            if(i == 6) {//5表示图片有5张1\2\3\4\5
                i = 1;
            }
            document.getElementById("box").style.background = "url( images/banner_0" + i + ".jpg) no-repeat";
            document.getElementById("box").style.backgroundSize = "contain";
            //通过id获取标签并修改背景样式
            time = setTimeout("showImg()", 2000);//启动时钟事件刷新时间 1000==1秒
        }
    </script>
</head>
<body>
    <div id="box">
        <img class="icon_left" src="images/icon_left.png" onclick="icon_left()">
        <img class="icon_right" src="images/icon_right.png" onclick="icon_right()">
    </div>
</body>
</html>

第二种：使用css样式margin-left实现图片轮播具有滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .banner-imgBox{
            width: 1530px;
            height: 470px;
            /*background-color: #009dda;*/
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .banner-imgBox2{
            width: 1530px;
            height: 470px;
            display: flex;
            /*background-color: chartreuse;*/
            margin: 0 auto;
            transition: all 0.5s;
        }
        .banner-imgBox2>img{
            width: 1530px;
            height: 470px;
        }
        .on{
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: gainsboro;
            margin-left: 20px;
        }
        .banner-imgBox-div{
            width: 400px;
            position: absolute;
            bottom: 20px;
            left: 40%;
            display: flex;
        }
        .on2{
            background-color: red;
        }
        .banner-imgBox-left{
            position: absolute;
            left: 20px;
            top:48%;
            width: 48px;
            height: 48px;
        }
        .banner-imgBox-right{
            position: absolute;
            right: 20px;
            top:48%;
            width: 48px;
            height: 48px;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="banner-imgBox">
        <div class="banner-imgBox2">
            <img src="images/banner_01.jpg" alt="">
            <img src="images/banner_02.jpg" alt="">
            <img src="images/banner_03.jpg" alt="">
            <img src="images/banner_04.jpg" alt="">
            <img src="images/banner_05.jpg" alt="">
        </div>
        <div class="banner-imgBox-div">
            <div class="on"></div>
            <div class="on"></div>
            <div class="on"></div>
            <div class="on"></div>
            <div class="on"></div>
        </div>
        <img class="banner-imgBox-left" src="images/icon_left.png" onclick="marginLeft(false)">
        <img class="banner-imgBox-right" src="images/icon_right.png" onclick="marginLeft(true)">
    </div>

</body>
<script>
    var time=2000;
    let content = document.querySelector('.banner-imgBox2');
    let switchBtn = document.querySelector('.banner-imgBox-div');
    switchBtn.children[0].classList.add('on2');
    let index=0;
    let x=0;
    function marginLeft(right) {
        if(right){
            switchBtn.children[index].classList.remove('on2');
            if(index==switchBtn.children.length-1){
                index=0;
                content.innerHTML+=content.innerHTML;
                x++;
            }else {
                index++;
                x++;
            }
            switchBtn.children[index].classList.add('on2');
            content.style.marginLeft=x*-1530+"px"
        }else{
            switchBtn.children[index].classList.remove('on2');
            if(index==0){
                index=switchBtn.children.length-1;
                if(x==0){
                    x=0
                }else{
                    x--;
                }
            }else {
                index--;
                x--;
            }
            switchBtn.children[index].classList.add('on2');
            content.style.marginLeft=x*-1530+"px"
        }

    }


    var interval = setInterval(() => {
        marginLeft(true)
    }, time);


    let container = document.querySelector('.banner-imgBox');
    // 鼠标经过时清除定时器
    container.onmouseover = function () {
        clearInterval(interval);
    }
    // 鼠标移开时设置定时器
    container.onmouseout = function () {
        // 先清除定时器
        clearInterval(interval);
        // 往右滑动并开启定时器
        // marginLeft(true)
        interval = setInterval(() => {
            marginLeft(true)
        }, time);
    }
</script>
</html>