控制多组图片切换

最新推荐文章于 2019-07-22 21:56:32 发布

能吃一大碗

最新推荐文章于 2019-07-22 21:56:32 发布

阅读量313

点赞数

分类专栏： js 文章标签： javascript js

本文链接：https://blog.csdn.net/xiaoshiqi17/article/details/78691104

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1, #box2 {
            width: 300px;
            height: 300px;
            margin-top: 20px;
            position: absolute;
        }

        #box1 {
            margin-left: 100px;

        }

        #box2 {
            margin-left: 500px;
        }

        #but1 {
            margin-left: 100px;
        }

        span {
            opacity: 0.8;
            width: 300px;
            position: absolute;
            height: 25px;
            text-align: center;
            background-color: #000;
            color: #fff;
        }

        #sp12, #sp22 {
            bottom: 0px;
        }

        img {
            width: 300px;
            height: 250px;
            background-color: #FA7908;
            position: absolute;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<button id="but1">上一组</button>
<button id="but2">下一组</button>
<div id="box1">
    <img id="img1">
    <span id="sp11">名字加载中</span>
    <span id="sp12">数量加载中</span>
</div>
<div id="box2">
    <img id="img2">
    <span id="sp21">名字加载中</span>
    <span id="sp22">数量加载中</span>
</div>


<script>

    var oButUp = document.getElementById('but1');
    var oButDown = document.getElementById('but2');
    var oSp1Name = document.getElementById('sp11');
    var oSp1Num = document.getElementById('sp12');
    var oSp2Name = document.getElementById('sp21');
    var oSp2Num = document.getElementById('sp22');
    var oImg1 = document.getElementById('img1');
    var oImg2 = document.getElementById('img2');

    var aSp1 = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png']
    var aSp2 = ['img/4.png', 'img/3.png', 'img/2.png']

    //初始化
    oSp1Name.innerHTML = '第一组第1张';
    oSp1Num.innerHTML = '1/4';
    oImg1.src = aSp1[0];
    oSp2Name.innerHTML = '第一组第1张';
    oSp2Num.innerHTML = '1/4';
    oImg2.src = aSp2[0];

    //函数封装
    function two() {
        if (oImg2.num == 3) {
            oImg2.num = 0;
        }
        oSp2Name.innerHTML = '第二组第' + (oImg2.num + 1) + '张';
        oSp2Num.innerHTML = (oImg2.num + 1) + '/' + aSp2.length;
        oImg2.src = aSp2[oImg2.num];
        oImg2.num++;
    }

    function one() {
        if (oImg1.num == 4) {
            oImg1.num = 0;
        }
        oSp1Name.innerHTML = '第一组第' + (oImg1.num + 1) + '张';
        oSp1Num.innerHTML = (oImg1.num + 1) + '/' + aSp1.length;
        oImg1.src = aSp1[oImg1.num];
        oImg1.num++;
    }

    //第一组
    for (var i = 0; i < aSp1.length; i++) {
        oImg1.num = 1;
        oImg1.onclick = function () {
            one();
        }
    }
    //第二组
    for (var i = 0; i < aSp2.length; i++) {
        oImg2.num = 1;
        oImg2.onclick = function () {
            two();
        }
    }
    //下一组
    oButDown.onclick = function () {
        two();
        one();
    }
    //上一组
    oButUp.onclick = function () {
        oImg2.num--;
        oImg1.num--;
        if (oImg2.num == 0) {
            oImg2.num = 3;
        }
        oSp2Name.innerHTML = '第二组第' + oImg2.num + '张';
        oSp2Num.innerHTML = oImg2.num + '/' + aSp2.length;
        oImg2.src = aSp2[oImg2.num-1];
        if (oImg1.num == 0) {
            oImg1.num = 4;
        }
        oSp1Name.innerHTML = '第一组第' + oImg1.num + '张';
        oSp1Num.innerHTML = oImg1.num + '/' + aSp1.length;
        oImg1.src = aSp1[oImg1.num-1];
    }


</script>
</body>
</html>