machinecat520
/
zj-Exercise


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 650px;
            margin: 20px auto;
            padding: 10px;
            background-color: greenyellow;
            /*设置文本居中*/
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            /*
            点击按钮切换图片
            */
            //获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            /*
            要切换图片就是要修改img标签的src属性
            */
            //获取img标签
            var img = document.getElementsByTagName("img")[0];
            //    alert(img);
            //创建一个数组，用来保存图片的路径
            var imgArr = ["img/1.jpeg","img/2.jpeg","img/3.jpeg","img/4.jpeg","img/5.jpeg"];
            //创建一个变量，来保存当前正在显示的图片的索引
            var index = 0;

            //设置提示文字
            //获取id为info的p元素
            var info = document.getElementById("info");
            //设置提示文字
            info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";

            //分别为两个按钮绑定单击响应函数
            prev.onclick = function () {
                // alert("上一张");
                /*
                切换到上一张，索引自减
                */
               index--;
               //判断index是否小于0
               if(index<0){
                //    index = 0;//表示点到第一张后就不再更新图片
                   index = imgArr.length-1;
               };
                img.src = imgArr[index];
                //当点击按钮以后，重新设置信息
                info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
            };
            next.onclick = function () {
                // alert("下一张");
                /*
                切换到下一张是index自增
                */
               index++;
               if(index>(imgArr.length-1)){
                //    index = imgArr.length-1;//表示点到最后一张后就不再更新图片
                   index = 0;
               };
                //切换图片就是修改img的src属性
                //要修改一个元素的属性：元素。属性=属性值
                img.src = imgArr[index];
                //当点击按钮以后，重新设置信息
                info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
            };


        };

    </script>
</head>

<body>
    <div id="outer">
        <p id="info">一共5张图片，当前第1张</p>
        <img src="img/1.jpeg" alt="冰棍">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

</html>