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

爱被打了一巴掌 2022-02-02 11:29 245阅读 0赞

## 循序和循环播放轮播图片 ##

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

![在这里插入图片描述][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/4d6875d530394aa2bc2e0ce4717f5712.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 html页面点击按钮播放语音,javascript – 当点击按钮时使用jQuery播放音频文件

哪种方法？您可以使用< audio>播放音频。标签或< object>或< embed>。延迟加载(当你需要它的负载)的声音是最好的方法，如果它的大小很小。您可以动态创

ゝ一世哀愁。/ 2022年10月06日 00:44/ 0 赞/ 270 阅读

相关 js实现轮播图点击按钮切换下一张图片

具体实现步骤： 2.1 点击右箭头让图片依次往后进行切换如果切换到最后一张回到第一张 1--2--3--4--1

女爷i/ 2022年09月11日 15:26/ 0 赞/ 284 阅读

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

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

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

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

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

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

相关 javascript实现一个简单的图片轮播和手动播放

<!DOCTYPE html> //还有许多地方有待改善 <html> <head> <meta charset="UTF-8"

蔚落/ 2022年05月26日 04:18/ 0 赞/ 169 阅读

相关 javascript图片轮播

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

深碍√TFBOYSˉ_/ 2022年05月12日 02:44/ 0 赞/ 313 阅读

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

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

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

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

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

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

相关 css实现图片点击轮播

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

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