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

骑猪看日落 2022-02-02 12:09 337阅读 0赞

## 点击小圆点循环播放图片 ##

<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>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220202/693b9d5923e54b5fb480974c70d6d4ee.png

发表评论取消回复

表情：

评论列表（有 0 条评论，337人围观）

还没有评论，来说两句吧...

相关阅读

相关轮播图实现(含1.自动轮播 2.左右点击轮播 3.图片数点击播放)

轮播图实现(含1.自动轮播 2.左右点击轮播 3.图片数点击播放) // An highlighted block <!DOCTYPE html> <

Love The Way You Lie/ 2022年10月26日 04:56/ 0 赞/ 197 阅读

相关 html图片圆点切换,图片轮播带小圆点选择左右切换

< ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jpg] > css代码 \\{

我会带着你远行/ 2022年10月05日 10:46/ 0 赞/ 257 阅读

相关简单的图片轮播加小圆点

先说一下思路，使用ViewPager加 LinearLayout 布局共同实现，先看布局 <android.support.v4.view.ViewPa

骑猪看日落/ 2022年08月23日 00:42/ 0 赞/ 174 阅读

相关简单的点击实现图片轮播~

第一次写博客，从十点开始说要来写，换了个头像，现在才开始码字。 `学习web前端时间并不多，还没毕业的自学小白，想要用博客来记录自己的学习史。` `有问题的任意吐槽~`

红太狼/ 2022年07月14日 09:08/ 0 赞/ 266 阅读

相关用JavaScript实现点击循环切换图片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <

忘是亡心i/ 2022年06月09日 09:57/ 0 赞/ 274 阅读

相关 JQ轮播(左右轮播切换，小圆点hover)

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

缺乏、安全感/ 2022年06月03日 00:39/ 0 赞/ 262 阅读

相关原生js点击轮播点击切换图片

![20180413143155395][] <!DOCTYPE html> <html> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月27日 06:51/ 0 赞/ 292 阅读

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

点击小圆点循环播放图片 <style> { padding: 0;

骑猪看日落/ 2022年02月02日 12:09/ 0 赞/ 338 阅读

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

循序和循环播放轮播图片 <style> { padding: 0; ma

爱被打了一巴掌/ 2022年02月02日 11:29/ 0 赞/ 233 阅读

相关 css实现图片点击轮播

css实现点击按钮图片轮播 html代码 <head> <meta charset="utf-8" /> <title></title>

Love The Way You Lie/ 2022年01月23日 02:07/ 0 赞/ 384 阅读