JS实现图片切换

最新推荐文章于 2024-06-27 12:49:37 发布

<-krush->

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量1.3k

点赞数

分类专栏： ▼ 前端开发

本文链接：https://blog.csdn.net/qq_33592583/article/details/78471064

版权

▼ 前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

 <!--这里使用了BootStrap的组件 也可以不使用-->

    <title>Bootstrap-js 开发</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

         window.οnlοad=function ()

         {
             //获取元素
             var pre = document.getElementById("pre");
             
             var next=document.getElementById("next");

             var img=document.getElementsByTagName("img")[0];
             //图片自行加载
             var imgarr=["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"];

             var info=document.getElementById("info");

             var index=0;
            
             info.innerHTML="一共"+imgarr.length+"张图片"+"当前第"+(index+1)+"张图片";
             //console.log(img);

             //点击上一张
             pre.onclick = function () {
                 //alert("上一张");
                 index--;
                 if(index<0)
                 {
                     index=0;
                 }
                 img.src=imgarr[index];
                 info.innerHTML="一共"+imgarr.length+"张图片"+"当前第"+(index+1)+"张图片";
             };
             //点击下一张
             next.οnclick=function(){
                 //alert("下一张");
                 index++;
                 if(index>imgarr.length-1){
                      //index=imgarr.length-1;
                      index=0;
                 }
                 img.src=imgarr[index];
                 info.innerHTML="一共"+imgarr.length+"张图片"+"当前第"+(index+1)+"张图片";
             };
        }
    </script>
</head>
<body>
         <style type="text/css">
            *{
                 margin:0;
                 padding:0;
            }
            #outer{
                width: 555px;
                margin: auto;
                padding: 10px;
                background-color: #9acfea;
                text-align: center;

            }
        </style>

        <div id="outer">
              <p id="info"></p>
             <img src="01.jpg" alt="风景01"/>
             <button id="pre" class="btn-warning">上一张</button>
             <button id="next" class="btn-warning">下一张</button>
        </div>



</body>
</html>