js轮播图简单实现

1 篇文章 0 订阅
1 篇文章 0 订阅

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
                window.οnlοad=function(){  
                        var imgage=document.getElementsByTagName("img")[0];
                        var imgarr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
                        var i=0;
                        var btn1=document.getElementById("button1");
                        var dha=document.getElementById("dh");
                        
                        
                        btn1.οnclick=function(){
                            i--;
                            if(i<0){
                                i=imgarr.length-1;
                            }
                            img.src=imgarr[i];
                            dha.innerHTML="目前有"+imgarr.length+"张图片,当前是第"+(i+1)+"张";
                        };
                        
                        
                        var btn2=document.getElementById("button2");
                        btn2.οnclick=function(){
                            i++;
                            if(i>imgarr.length-1){
                                i=0;
                            }
                            imgage.src=imgarr[i];
                            dha.innerHTML="目前有"+imgarr.length+"张图片,当前是第"+(i+1)+"张";
                        };
                        
                    };
                </script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                height:450px;
                width: 450px;
                padding: 10px;
                background-color: aqua;
                margin: 50px auto;
                text-align: center;
            }
            img{
                width: 400px;
                height: 400px;
                }
            button{
                width: 40px;
            }
        </style>
        
    </head>
    <body>
        <div class="div">
            <p id="dh">目前是首页</p>
            <img src="img/1.jpg" ><br>
            <button id="button1" ><</button>
            <button id="button2" >></button>
        </div>
        
    </body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值