简单的图片切换

原创于 2019-03-29 12:29:40 发布 · 619 阅读

CC 4.0 BY-SA版权

文章标签：

一直想开始写博客但是总感觉水平不够，今天算是想明白了，总是要记录一下自己进步的过程才能看到自己的成长。
今天是复习了dom，之前学dom觉得很难，dom其实就是把页面里的所有元素转成一个对象然后用他们之间的关系模型找到对象，找对象之后，就搞对象（引用老师的话来说），就这么简单；

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script>
   //window.onload让页面加载之后在执行
  window.onload = function(){
   //获取按钮（找对象）
   var prev=document.getElementById("prev");
   var next=document.getElementById("next");
   //获取图片
   var img = document.getElementsByTagName("img")[0];
   //显示多少页
   var page = document.getElementById("page");
   //把图片都放在一个数组里面可以进行操作
   var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg"];
   
   var index = 0;
   //点击按钮进行的事件
   prev.onclick = function(){
    index --;
    if(index < 0){
     index = imgArr.length -1;
    }
    page.innerHTML = index + 1;
    img.src = imgArr[index];
   }
   next.onclick = function(){
    index ++;
    if(index > imgArr.length-1){
     index = 0;
    }
    page.innerHTML = index + 1;
    img.src = imgArr[index];
   }
  }
   
  </script>
  <style>
   /* 清除原来的样式*/
   *{
    margin: 0;
    padding: 0;
   }
   #div1{
    padding: 10px;
    margin: 50px auto;
    background-color: antiquewhite;
    text-align: center;
   }
  </style>
 </head>
 <body>
  <div id="div1">
  <img src="img/1.jpg"> 
  <div>
 <button id="prev"><<上一页</button>
  第<span id="page">1</span>页
  <button id= "next">下一页>></button>
  </div>
  </div>
  
 </body>
</html>

出来的效果就是下面这种，可以切换而且页数也会更新；样式不是很好看嘻嘻，下次在改

在这里插入图片描述