JS-图片切换

最新推荐文章于 2023-03-10 16:53:26 发布

迪仙女

最新推荐文章于 2023-03-10 16:53:26 发布

阅读量169

点赞数

分类专栏： html+css+js学习

本文链接：https://blog.csdn.net/m0_48270515/article/details/108308885

版权

html+css+js学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

理论部分：
1.DOM：
Document object model文档对象模型
作用：通过js操作html网页
节点：node 构成HTML文档最基本的单元
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

2.文档加载：
JS代码执行时是从上往下执行，所以若我们要把js代码写在头部，就要把要执行的代码放在函数window.οnlοad=function(){}中
确保function里面的功能在页面加载完成后执行。

3.获取元素节点：
例如：getElementById()通过元素id获取一个元素
getElementsByTagName()通过标签获取一组元素

练习：

需求：实现图片之间的循环切换并能显示当前一共多少张图片，且当前在第几张

设计：
1.获取按钮元素节点，创建对象
2.获取图片元素节点，创建对象
3.创建图片地址数组
4.给按钮元素节点绑定事件，实现上一张下一张的图片切换：根据索引号更改当前要显示的图片地址
5.实现图片的循环切换：当当前索引号为小于0时将索引号改为图片地址数组长度-1的数，当当前索引号为大于图片地址数组长度-1时将索引号改为0
6.在每次执行上一张/下一张的事件时，同步当前图片地址数组的索引号

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin: 0;
    padding: 0;
}
#outer{
    width: 600px;
    margin: 0 auto;
    padding: 10px;
    background-color: greenyellow;
    text-align: center;
}

    </style>
    <script type="text/javascript">
     window.onload=function(){
         var pre=document.getElementById("pre");
         var img=document.getElementsByTagName("img")[0];
         var imgArr=["img.jpg","pic.png"];
         var index=0;
         var info=document.getElementById("info");
         
         pre.onclick=function(){
             index--;
             info.innerHTML="一共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";
             if(index<0){
                 index=imgArr.length-1;
             }
             img.src=imgArr[index];
         };
         var next=document.getElementById("next");
         next.onclick=function(){  index++;
            info.innerHTML="一共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";
             if(index>imgArr.length-1){
                 index=0;
             }
           
             img.src=imgArr[index];
         };
     };
    </script>
</head>
<body>
    <div id="outer">
        <p id="info"></p>
        <img src="img.jpg" alt=""> 
           
        <button id="pre">上一张</button>
        <button id="next">下一张</button>
   </div>
</body>
</html>

迪仙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-图片切换

理论部分：1.DOM：Document object model文档对象模型作用：通过js操作html网页节点：node 构成HTML文档最基本的单元文档节点：整个HTML文档元素节点：HTML文档中的HTML标签属性节点：元素的属性文本节点：HTML标签中的文本内容2.文档加载：JS代码执行时是从上往下执行，所以若我们要把js代码写在头部，就要把要执行的代码放在函数window.οnlοad=function(){}中确保function里面的功能在页面加载完成后执行。3.获取元
复制链接

扫一扫

专栏目录