casanava 发表于 2019-6-19 18:21:15

自动轮播图問题

下列轮播图代码可以运行，页面加载之后就自动更换图片，
按stop能停下来，
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>LBT04_2</title>
<style type="text/css">
.wrap{width:400px;
height:300px;
position:relative;}

.list{width:400px;
height:300px;
list-style:none;
padding-left:0;
position:relative;}

.item{position:absolute;
width:100%;
height:100%;
color:white;
font-size:50px;}

.item:nth-child(1){background-color:none;}
.item:nth-child(2){background-color:red;}
.item:nth-child(3){background-color:yellow;}
.item:nth-child(4){background-color:blue;}
.item:nth-child(5){background-color:green;}

.btn{width:50px;
height:50px;
position:absolute;
top:100px;
z-index:100;}
#stoply{left:0;}
#startly{right:0;}

.item.active{z-index:10;}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
    <img class="item" src="LDY01.jpg" alt=""/>
        <img class="item" src="LDY02.jpg" alt=""/>
        <img class="item" src="LDY03.jpg" alt=""/>
        <img class="item" src="LDY04.jpg" alt=""/>
        <img class="item" src="LDY05.jpg" alt=""/>
</ul>

<button type="button" class="btn" id="stoply" onclick="StopPlay()">stop</button>
<button type="button" class="btn" id="startly" onclick="setInterval()">start</button>   
   
</div>       
<script type="text/javascript">
    var items=document.getElementsByClassName('item');      
    var startlyBtn=document.getElementById('startly');   
    var index=0;//表示第几张图片显示,有active类名   
        var clearActive = function(){
          for(var i=0; i<items.length; i++){
                   items.className='item';
                }
          }
          
        var goIndex=function(){       
          clearActive();                            
              items.className='item active';
        }
       
        var startly = function(){
           if(index < 4){
             index ++;
           }else{
              index=0;
           }                     
           goIndex();
        }
               
        startlyBtn.addEventListener('click',function(){
           startly();
        })
               
        var autop=setInterval(function(){
             startly();
        },1000)
               
        function StopPlay() {
    clearInterval(autop);
        }
       
</script>
</body>
</html>

casanava 发表于 2019-6-19 18:23:42

我现在要求按start就才自动播放图片，刚加载页面时不会自动播放图片。
怎么改代码？请大侠指导，谢谢

newu 发表于 2019-6-19 18:24:31

所以这位朋友你想问什么？

casanava 发表于 2019-6-19 18:27:25

要求按start就才自动播放图片，

wongyusing 发表于 2019-6-19 18:29:52

设定一个布尔类型的变量
默认为False
当为Flase的时候不进行轮播。

casanava 发表于 2019-6-19 18:38:26

可以把代码展示一下吗？

newu 发表于 2019-6-19 18:57:52

本帖最后由 newu 于 2019-6-19 19:09 编辑

这个js一停止就不能自动播了

不二如是 发表于 2019-6-20 10:48:41

1、鱼油需求：


即按 start 就自动播放图片。

2、将定时器加到 startly() 中，用按键 onclick 方法触发即可：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>LBT04_2</title>
    <style type="text/css">
      .wrap{width:400px;
            height:300px;
            position:relative;}

      .list{width:400px;
            height:300px;
            list-style:none;
            padding-left:0;
            position:relative;}

      .item{position:absolute;
            width:100%;
            height:100%;
            color:white;
            font-size:50px;}

      .item:nth-child(1){background-color:none;}
      .item:nth-child(2){background-color:red;}
      .item:nth-child(3){background-color:yellow;}
      .item:nth-child(4){background-color:blue;}
      .item:nth-child(5){background-color:green;}

      .btn{width:50px;
            height:50px;
            position:absolute;
            top:100px;
            z-index:100;}
      #stoply{left:0;}
      #startly{right:0;}

      .item.active{z-index:10;}
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list">
      <img class="item" src="LDY01.jpg" alt=""/>
      <img class="item" src="LDY02.jpg" alt=""/>
      <img class="item" src="LDY03.jpg" alt=""/>
      <img class="item" src="LDY04.jpg" alt=""/>
      <img class="item" src="LDY05.jpg" alt=""/>
    </ul>

    <button type="button" class="btn" id="stoply" onclick="StopPlay()">stop</button>
    <button type="button" class="btn" id="startly" onclick="startly()">start</button>

</div>
<script type="text/javascript">



    var items=document.getElementsByClassName('item');
    var startlyBtn=document.getElementById('startly');
    var index=0;//表示第几张图片显示,有active类名
    var clearActive = function(){
      for(var i=0; i<items.length; i++){
            items.className='item';
      }
    }

    var goIndex=function(){
      clearActive();
      items.className='item active';
    }

    var startly = function(){
      var autop=setInterval(function(){
            if(index < 4){
            index ++;
      }else{
            index=0;
      }
      goIndex();
      },1000)
    }

    startlyBtn.addEventListener('click',function(){
      startly();
    })

    // var autop=setInterval(function(){
    //   startly();
    // },1000)

    function StopPlay() {
      clearInterval(autop);
    }

</script>
</body>
</html>
页: [1]
查看完整版本: 自动轮播图問题