javascript多张图片切换

最新推荐文章于 2022-11-12 16:48:15 发布

chexijing7210

最新推荐文章于 2022-11-12 16:48:15 发布

阅读量182

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3402290/blog/1532403

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#pic{
    width:498px;
    height: 498px;
    border:#6f6f71 1px solid;
    position: relative;}
#pic img{
    width:500px;
    height:500px;
}
        #num{
            width: 80px;
            height:30px;
            display: inline-block;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            top:0;
            left: 230px;
            text-align: center;
        }
        #picDes{
            width: 100%;
            height: 40px;
            background-color: rgba(0,0,0,0.4);
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<input type="button" id="order" name="order" value="顺序播放">
<input type="button" id="loop" name="loop" value="循环播放">
<div id="pic"><span id="num"></span><img src="img1/x4.jpg" alt="#" id="img"><div id="picDes"></div></div>
<input type="button" id="forward" name="forward" value="上一张">
<input type="button" id="next" name="next" value="下一张">
</body>
<script>
    var order=document.getElementById("order");
    var loop=document.getElementById("loop");
    var pic=document.getElementById("pic");
    var forward=document.getElementById("forward");
    var next=document.getElementById("next");
    var num=document.getElementById("num");
    var picDes=document.getElementById("picDes");
    var img=document.getElementById("img");

    var arr=["img/x1.jpg","img/x2.jpg","img/x3.jpg","img/x4.jpg"];
    var des=["操场风景","羽毛球运动场","篮球运动场","体育馆"];
    var select=true;
    var n=0;
    order.οnclick=function () {
        select=true;

    }
    loop.οnclick=function () {
        select=false;

    }
    next.οnclick=function () {
        n ++;
        if(n>4){
            if(select){
                n=4;
                alert('已经是最后一张啦');
            }else{
                n=0;
            }
        }
        tranform();

    }
    forward.οnclick=function () {
        n --;
        if(n<0){
            if(select){
                n=0;
                alert('已经是第一张啦');
            }else{
                n=5;
            }
        }
        tranform();

    }
    function tranform() {
    num=n+'/'+arr.length;
        img.src=arr[n];
        picDes=des[n];
 pic.innerHTML='<div id="pic"><span id="num">'+num+'</span><img src='+img.src+' alt="#" id="img" style="width: 500px; height: 500px;"><div id="picDes">'+picDes+'</div></div>'
    }
</script>
</html>

转载于:https://my.oschina.net/u/3402290/blog/1532403