用javascript点击小圆点循环播放轮播图片

最新推荐文章于 2023-05-26 15:06:03 发布

大可&不必

最新推荐文章于 2023-05-26 15:06:03 发布

阅读量2k

点赞数 2

文章标签：用javascript点击小圆点循环播放轮播图片

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

版权

点击小圆点循环播放图片

   <style>
          *{
              padding: 0;
              margin: 0;
          }
          .place{
              position: relative;
              width: 800px;
              height: 600px;

          }
           p{
              top: 0;
              left: 0;
              height: 30px;
              color: white;
              background-color: rgba(0, 0, 0, 0.5);
              text-align: center;
              line-height: 30px;
          }
          #mein1{
            
            margin-top: 570px; 
          }
           img{
              width: 800px;
              height: 600px;

          }
         p,.box{
            position: absolute;
             width: 100%;
         
          }
          .box{
            bottom: 10px;
			text-align: center;
          }

          .box span{
              display: inline-block;
              background-color: blue;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              cursor:pointer;
              margin-bottom: 30px;
          }
          .place .box .content{
              background-color: red;
          }
          .box button{
            position: absolute;
            width: 35px;
            height: 50px;
            font-size: 30px;
            top: -400%;
            background:rgba(0,0,0,.3);
            color: #fff;
        }
        .box .leftBut{
            left: 0;
        }
        .box .rightBut{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="place">
        <p>1</p>
        <p id="mein1">美女1</p>
        
        <img src="./img/1.jpg" alt="">
        <div class="box">
                <span class="content"></span>
                <span></span>
                <span></span>
                <span></span>
                <button class="leftBut"><</button>
                <button class="rightBut">></button>
        </div>
    </div>
</body>
<script type="text/javascript">
    var spanarr = document.getElementsByClassName('box')[0].getElementsByTagName('span');
   var img = document.getElementsByTagName('img')[0];
   var p = document.getElementsByTagName('p');
   var btn = document.getElementsByTagName('button');
   var imgarr = ['./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[1].onclick = function(){
         n++;
        
         if(n == imgarr.length){
             if(tag == false){
                
                 n = imgarr.length - 1;
             }else{
                 n=0;
             }
         }
         for(var i=0;i<spanarr.length;i++){
             spanarr[i].className = '';
         }
        
             img.src = imgarr[n];
             p[0].innerHTML = n+1;
            p[1].innerHTML = "美女"+(n+1);
            spanarr[n].className = 'content';
     }
// 点击左边的按钮，切换图片
  btn[0].onclick = function(){
    n--;
    if(n < 0){
        if(tag == false){
            
            n=0;
        }else{
            n=imgarr.length - 1;
        }
    }
    for(var i=0;i<spanarr.length;i++){
             spanarr[i].className = '';
         }
          //spanarr.className = 'content';
            img.src = imgarr[n];
             p[0].innerHTML = n+1;
           p[1].innerHTML = "美女"+(n+1);
           spanarr[n].className = 'content';
}
// 小圆点
for(var i = 0;i<spanarr.length;i++){
       spanarr[i].index = i;
       spanarr[i].onclick = function(){
           img.src = imgarr[this.index];
           for(var j = 0;j<spanarr.length;j++){
               spanarr[j].className = '';
           }
           n=[this.index];
           this.className = 'content';
           p[0].innerHTML = 1+(this.index);
           p[1].innerHTML = '美女'+(this.index+1);
           
       }
   }
</script>

效果图
在这里插入图片描述

大可&不必

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
用javascript点击小圆点循环播放轮播图片

点击小圆点循环播放图片 <style> *{ padding: 0; margin: 0; } .place{ position: relative; width: 800px; h...
复制链接

扫一扫