JS实例-DOM-切换图片

  • A+
所属分类：Web前端
摘要

切换图片  <style>
      *{
         margin:0;
         padding:0;
      }
      #outer{
         width:1500px;
         margin:50px auto;
         
         padding:20px;
         /*文本居中*/
         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/2.jpg’,’img/3.jpg’,’img/4.jpg’,’img/5.jpg’];
         //创建一个索引
         var index=0;

         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];
         };
         next.onclick=function () {
            index++;
            if(index>imgArr.length-1){
               index=0;
            }
            //要修改一个元素的属性元素，属性=属性值
            img.src=imgArr[index];
            info.innerHTML=”一共”+imgArr.length+”张照片，当前第”+(index+1)+”张”;
         };
      }
   </script>
</head>
<body>
<div id=”outer”>
   <p id=”info”></p>
   <img src=”img/2.jpg” alt=”冰”/>
   <button id=”prev”>上一张</button>
   <button id=”next”>下一张</button>
</div>
</body>
便宜好用的国外VPS推荐

切换图片

 

<style>
      *{
         margin:0;
         padding:0;
      }
      #outer{
         width:1500px;
         margin:50px auto;
         
         padding:20px;
         /*文本居中*/
         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/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
         //创建一个索引
         var index=0;

         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];
         };
         next.onclick=function () {
            index++;
            if(index>imgArr.length-1){
               index=0;
            }
            //要修改一个元素的属性元素，属性=属性值
            img.src=imgArr[index];
            info.innerHTML="一共"+imgArr.length+"张照片，当前第"+(index+1)+"张";
         };
      }
   </script>
</head>
<body>
<div id="outer">
   <p id="info"></p>
   <img src="img/2.jpg" alt="冰"/>
   <button id="prev">上一张</button>
   <button id="next">下一张</button>
</div>
</body>

便宜好用的国外VPS推荐