36、图片切换

最新推荐文章于 2022-06-20 21:03:47 发布

五仁卤鸡翅

最新推荐文章于 2022-06-20 21:03:47 发布

阅读量135

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/MoonNight608/article/details/106855223

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章目录

介绍
图片切换

介绍

本文是在学习JS所做的学习笔记，所有笔记内容请看：JS学习笔记

图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <p id="info"></p>
   <img src="img/1.jpg" alt="冰棍"/>
   <button id="pre">点我一下</button>
   <button id="next">点我一下</button>
   <script>
    /*
      点击按钮切换图片
    */
     var prev=document.getElementById("pre");
     var next=document.getElementById("next");
     var img=documnet.getElementsByTagName("img")[0];
     // 创建一个数组，保存图片路径
     var imgArr=['img/1.img','img/2.img','img/3.img','img/4.img']
     
     //创建一个变量，保存图片索引
     var index=0;
     
     // 设置图片提示
     var info=documen.getElementById("info");
     info.innerHTML="一共"+imgArr.length+"图片，当前是第”+(index+1)+"张"
    /*
      切换图片，就是修改图片src
    */
    prev.onclick=function(){
        index--; 
        if(index<0){
            index=0
        }
        info.innerHTML="一共"+imgArr.length+"图片， 当前是第”+(index+1)+"张"
        img.src=imgArr[index];
    }
    next.onclick=function(){
        // 修改元素属性
        index++
        if(index>imgArr.length-1){
            index=imgArr.lenght-1;
        }
        info.innerHTML="一共"+imgArr.length+"图片， 当前是第”+(index+1)+"张"
        img.src=imgArr[index];
    }
     
   </script>
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

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

文章目录介绍图片切换介绍本文是在学习JS所做的学习笔记，所有笔记内容请看：JS学习笔记图片切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p id="info"></p> <img src="i
复制链接

扫一扫

专栏目录