学习js，写了一个js实现简易的轮播图

最新推荐文章于 2022-03-17 15:03:00 发布

WeiZhihuicsdn

最新推荐文章于 2022-03-17 15:03:00 发布

阅读量291

点赞数 1

分类专栏：前端 JavaScript 文章标签： js 轮播图 JavaScript

本文链接：https://blog.csdn.net/WeiZhihuiCSDN/article/details/89355291

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/index.css" />
       <script type="text/javascript">
           window.οnlοad=function(){
               var imgs=document.getElementsByTagName("img");//获取img元素，才能修改src的值
               var but1=document.getElementById("shang");//获取上一张按钮元素，为点击事件写函数
               var but2=document.getElementById("next");//获取下一张按钮元素，为点击事件写函数
               var pic=["img/hoary-head.jpg",//将所有轮播图片的URL放到一个数组当中，轮播时从里面取出图片，将图片换为自己的即可使用
               "img/music_01.jpg",
               "img/music.jpg",
               "img/school.jpg",
               "img/travel_02.jpg"];
               var index=0;//变量，用作数组下标
               var str=document.getElementById("tishi");//获取p标签，轮播提示语
               str.innerHTML="总共"+pic.length+"张照片，"+"这是第"+(index+1)+"张照片";
               but1.οnclick=function(){//上一张按钮的单击事件函数。
                   index--;
                   if(index<0)//当图片是第一张是，再上一张就会没有值，将index修改为数组的最后一个下标值，实现循环轮播
                       index=pic.length-1;
                   imgs[0].src=pic[index];//将img元素里的src属性修改，实现图片切换
                   str.innerHTML="总共"+pic.length+"张照片，"+"这是第"+(index+1)+"张照片";
               }
               but2.οnclick=function(){
                   index++;
                   if(index>=pic.length)
                       index=0;
                   imgs[0].src=pic[index];
                   str.innerHTML="总共"+pic.length+"张照片，"+"这是第"+(index+1)+"张照片";
               }
           }

       </script>
   </head>
   <body>

       <div id="touch">
           <p id="tishi"></p>
           <img src="img/hoary-head.jpg" align="图片"/><br />
           <button id="shang">上一张</button>
           <button id="next">下一张</button>
       </div>
   </body>
</html>