设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 自动轮播图問题
返回列表 发新帖
查看: 2409|回复: 7

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

[复制链接]
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、鱼油需求：
Snip20190620_11.png


即按 start 就自动播放图片。

2、将定时器加到 startly() 中，用按键 onclick 方法触发即可：
Jun-20-2019 10-48-00.gif

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

  11.         .list{width:400px;
  12.             height:300px;
  13.             list-style:none;
  14.             padding-left:0;
  15.             position:relative;}

  17.         .item{position:absolute;
  18.             width:100%;
  19.             height:100%;
  20.             color:white;
  21.             font-size:50px;}

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

  29.         .btn{width:50px;
  30.             height:50px;
  31.             position:absolute;
  32.             top:100px;
  33.             z-index:100;}
  34.         #stoply{left:0;}
  35.         #startly{right:0;}

  37.         .item.active{z-index:10;}
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="wrap">
  42.     <ul class="list">
  43.         <img class="item" src="LDY01.jpg" alt=""/>
  44.         <img class="item" src="LDY02.jpg" alt=""/>
  45.         <img class="item" src="LDY03.jpg" alt=""/>
  46.         <img class="item" src="LDY04.jpg" alt=""/>
  47.         <img class="item" src="LDY05.jpg" alt=""/>
  48.     </ul>

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

  53. </div>
  54. <script type="text/javascript">



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

  67.     var goIndex=function(){
  68.         clearActive();
  69.         items[index].className='item active';
  70.     }

  72.     var startly = function(){
  73.         var autop=setInterval(function(){
  74.             if(index < 4){
  75.             index ++;
  76.         }else{
  77.             index=0;
  78.         }
  79.         goIndex();
  80.         },1000)
  81.     }

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

  87.     // var autop=setInterval(function(){
  88.     //     startly();
  89.     // },1000)

  91.     function StopPlay() {
  92.         clearInterval(autop);
  93.     }

  95. </script>
  96. </body>
  97. </html>
复制代码

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

casanava
 楼主| 发表于 2019-6-19 18:23:42 | 显示全部楼层
我现在要求按start就才自动播放图片，刚加载页面时不会自动播放图片。
怎么改代码？请大侠指导，谢谢
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

newu
发表于 2019-6-19 18:24:31 | 显示全部楼层
所以这位朋友你想问什么？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

casanava
 楼主| 发表于 2019-6-19 18:27:25 | 显示全部楼层
要求按start就才自动播放图片，
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

wongyusing
发表于 2019-6-19 18:29:52 | 显示全部楼层
设定一个布尔类型的变量
默认为False
当为Flase的时候不进行轮播。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

casanava
 楼主| 发表于 2019-6-19 18:38:26 | 显示全部楼层
可以把代码展示一下吗？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

newu
发表于 2019-6-19 18:57:52 | 显示全部楼层
本帖最后由 newu 于 2019-6-19 19:09 编辑

这个js一停止就不能自动播了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2019-6-20 10:48:41 | 显示全部楼层    本楼为最佳答案   
1、鱼油需求：
Snip20190620_11.png


即按 start 就自动播放图片。

2、将定时器加到 startly() 中，用按键 onclick 方法触发即可：
Jun-20-2019 10-48-00.gif

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

  11.         .list{width:400px;
  12.             height:300px;
  13.             list-style:none;
  14.             padding-left:0;
  15.             position:relative;}

  17.         .item{position:absolute;
  18.             width:100%;
  19.             height:100%;
  20.             color:white;
  21.             font-size:50px;}

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

  29.         .btn{width:50px;
  30.             height:50px;
  31.             position:absolute;
  32.             top:100px;
  33.             z-index:100;}
  34.         #stoply{left:0;}
  35.         #startly{right:0;}

  37.         .item.active{z-index:10;}
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="wrap">
  42.     <ul class="list">
  43.         <img class="item" src="LDY01.jpg" alt=""/>
  44.         <img class="item" src="LDY02.jpg" alt=""/>
  45.         <img class="item" src="LDY03.jpg" alt=""/>
  46.         <img class="item" src="LDY04.jpg" alt=""/>
  47.         <img class="item" src="LDY05.jpg" alt=""/>
  48.     </ul>

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

  53. </div>
  54. <script type="text/javascript">



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

  67.     var goIndex=function(){
  68.         clearActive();
  69.         items[index].className='item active';
  70.     }

  72.     var startly = function(){
  73.         var autop=setInterval(function(){
  74.             if(index < 4){
  75.             index ++;
  76.         }else{
  77.             index=0;
  78.         }
  79.         goIndex();
  80.         },1000)
  81.     }

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

  87.     // var autop=setInterval(function(){
  88.     //     startly();
  89.     // },1000)

  91.     function StopPlay() {
  92.         clearInterval(autop);
  93.     }

  95. </script>
  96. </body>
  97. </html>
复制代码

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-25 16:20

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表