js图片切换

来源：互联网发布：java认证考试一年几次编辑：程序博客网时间：2024/06/07 04:16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/reset.css">
    </head>
    <body>
        <div class="box">
            <form class="btn1">
                <input type="button" value="顺序播放" id="order">
                <input type="button" value="循环播放" id="loop">
            </form> 
            <p id="btnDes">图片顺序播放</p>
            <img src="img/1a.jpg" id="pic">
            <p id="num">1/5</p>
            <form>
                <input type="button" value="上一张" id="forward">
                <input type="button" value="下一张" id="next">             
            </form>
            <p id="p">这是第一张图片</p>           
        </div>



        <script>
            var next = document.getElementById("next");
            var forward = document.getElementById("forward");
            var pic = document.getElementById("pic");
            var num = document.getElementById("num");
            var p = document.getElementById("p");

            var asrc = ["img/1a.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
            var ap = ["这是第一张图片","这是第二张图片","这是第三张图片","这是第四张图片","这是第五张图片"];

            var aa = 0;
            function bb(){
                pic.src = asrc[aa];
                p.innerHTML = ap[aa];
                num.innerHTML = aa+1 + "/" + asrc.length;
            };
            bb();

            next.onclick = function(){
                aa ++;
                if(aa>asrc.length-1){
                    aa = 0;
                };
                bb();
            };

            forward.onclick = function(){
                aa --;
                if(aa<0){
                    aa = asrc.length-1;
                };
                bb();
            };
        </script>

        
</body>
</html>
阅读全文
0 0