[已解决]自动轮播图問题

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

下列轮播图代码可以运行，页面加载之后就自动更换图片，
按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[i].className='item';
}
   }

var goIndex=function(){
      clearActive();
      items[index].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>

最佳答案

月排行榜 / 总排行榜

不二如是

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[i].className='item';
        }
    }

    var goIndex=function(){
        clearActive();
        items[index].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>

跳转到最佳答案楼层

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[i].className='item';
        }
    }

    var goIndex=function(){
        clearActive();
        items[index].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>

账号		自动登录	找回密码
密码			立即注册