javascript点击按钮循序和循环播放轮播图片

最新推荐文章于 2023-05-30 22:55:51 发布

大可&不必

最新推荐文章于 2023-05-30 22:55:51 发布

阅读量960

点赞数 1

文章标签： javascript点击按钮循序和循环播放轮播图片

本文链接：https://blog.csdn.net/style201904/article/details/90110092

版权

循序和循环播放轮播图片

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #place{
            width: 800px;
            text-align: center;
            margin: 0 auto;
        }

        #box{   
            width: 800px;
            height: 525px;
            border: 1px solid;
            position: relative;
        }
       

        #box p{
            position: absolute;
            width: 100%;
            line-height: 30px;
            background: rgba(0,0,0,.3);
            color: #fff;
        }

        #box .taoming1{
            top: 0;
        }
        #box .taoming2{
            bottom: 0;
        }

        #box button{
            position: absolute;
            width: 35px;
            height: 50px;
            font-size: 30px;
            top: 50%;
            margin-top: -25px;
            background:rgba(0,0,0,.3);
            color: #fff;
        }
        #box .leftBut{
            left: 0;
        }
        #box .rightBut{
            right: 0;
        }
        #box img{
            width: 100%;
            height: 100%;
        }
       
    </style>




</head>

<body>
    <div id="place">
                   <button>顺序</button>
                   <button>循环</button>
        <div id="box">
            <img src="./img/1.jpg" alt="">
                <p class="taoming1">1/4</p>
                <p class="taoming2">美女1</p>
                <button class="leftBut"><</button>
                <button class="rightBut">></button>
        </div>
    </div>
</body>
<script type="text/javascript">
     var img = document.getElementsByTagName('img')[0];
     var taom = document.getElementsByTagName('p');
     var btn = document.getElementsByTagName('button');
     var mg = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
     var n = 0; 
     var tag = true;
    
     btn[0].onclick = function(){
         tag = true;
     }
     btn[1].onclick = function(){
         tag = false;
     }
     //点击右边的按钮，切换图片
     btn[3].onclick = function(){
         n++;
         if(n == mg.length){
             if(tag == true){
                 alert('已经是最后一张');
                 n = mg.length - 1;
             }else{
                 n=0;
             }
         }
             img.src = mg[n];
             taom[0].innerHTML = n+1+"/4";
            taom[1].innerHTML = "美女"+(n+1);
     }
// 点击左边的按钮，切换图片
  btn[2].onclick = function(){
    n--;
    if(n < 0){
        if(tag == true){
            alert('已经是最前一张');
            n=0;
        }else{
            n=mg.length - 1;
        }
    }
            img.src = mg[n];
             taom[0].innerHTML = n+1+"/4";
            taom[1].innerHTML = "美女"+(n+1);
}

</script>

在这里插入图片描述