实现js点击事件--切换上下图片第几张也随之改变——ChangXuanjie

本文链接：https://blog.csdn.net/ChangXuanjie/article/details/108229075

点击切换上一张下一张，头部信息第几张也随之改变

在这里插入图片描述

CSS样式设置背景图颜色及位置

<style>
	*{
      padding: 0;
      margin: 0;
     }
    #outer{
      width: 500px;
      margin: 50px auto;
      background: greenyellow;
      padding: 10px;
      text-align: center;
    }
</style>

HTML主体

<body>
    <div id="outer">
        <p id="info">一共</p>
        <img src="img/1.jpg" alt="">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

JavaScript

<script>
    //获取两个按钮
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');

    //要切换图片就应该修改img的src属性
    var img = document.getElementsByTagName('img')[0];

    //创建一个数组，用来保存图片的路径
    var imgArr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];

    //创建一个变量，来保存正在显示的图片的额索引
    var index = 0;

    //获取id为info的p
    var info = document.getElementById('info');

    //设置提示文字
    info.innerHTML = "一共有"+imgArr.length+"张，当前第"+(index+1)+"张";

    //分别为两个按钮绑定单击响应函数
    prev.onclick = function(){
        // 切换到上一张，索引自减
        index--;

        //判断index是否小于0
        if(index < 0){
            index = imgArr.length - 1;
        }
        img.src = imgArr[index];
        //当点击按钮以后，重新设置信息
        info.innerHTML = "一共有"+imgArr.length+"张，当前第"+(index+1)+"张";
    }
    next.onclick = function(){
        //切换到下一张，索引自增
        index++;

        //判断index是否大于imgArr.length - 1
        if(index > imgArr.length - 1){
            index = 0;
        }
        img.src = imgArr[index];
        //当点击按钮以后，重新设置信息
        info.innerHTML = "一共有"+imgArr.length+"张，当前第"+(index+1)+"张";
    }
</script>