用js自动间隔滑动div

Question

我正在尝试制作一个滑块，使其内容以特定间隔旋转。该代码在单击时运行良好，但当我尝试使其自动运行时，它无法运行。我不知道错误到底在哪里，但我认为是在函数的调用和定义中，我们将不胜感激。

这是我的代码：

<script>
       var slider = document.getElementById('slider');
       var active = document.getElementById('active');
       var line1 = document.getElementById('line1');
       var line2 = document.getElementById('line2');
       var line3 = document.getElementById('line3');
       var line4 = document.getElementById('line4');
       var line5 = document.getElementById('line5');
       var line6 = document.getElementById('line6');
       var line7 = document.getElementById('line7');
       var line8 = document.getElementById('line8');
       var line9 = document.getElementById('line9');
       var line10 = document.getElementById('line10');



    function fline1() {
           line1=function() {
           slider.style.transform = 'translateX(0)';
           active.style.top = '0px';
           }
        }

    function fline2() {
           line2=function() {
           slider.style.transform = 'translateX(-10)';
           active.style.top = '32px';
           }
        }


    function fline3() {
           line3=function() {
           slider.style.transform = 'translateX(-20)';
           active.style.top = '64px';
           }
        }


    function fline4() {
           line4=function() {
           slider.style.transform = 'translateX(-30)';
           active.style.top = '96px';
           }
        }

    function fline5() {
           line5=function() {
           slider.style.transform = 'translateX(-40)';
           active.style.top = '128px';
           }
        }


    function fline6() {
           line6=function() {
           slider.style.transform = 'translateX(-50)';
           active.style.top = '160px';
           }
        }

    function fline7() {
           line7=function() {
           slider.style.transform = 'translateX(-60)';
           active.style.top = '192px';
           }
        }


    function fline8() {
           line8=function() {
           slider.style.transform = 'translateX(-70)';
           active.style.top = '224px';
           }
        }


    function fline9() {
           line9=function() {
           slider.style.transform = 'translateX(-80)';
           active.style.top = '256px';
           }
        }

    function fline10() {
           line10=function() {
           slider.style.transform = 'translateX(-90)';
           active.style.top = '288px';
           }
        }

下面是最初用于手动旋转的代码：

        var slider = document.getElementById('slider');
       var active = document.getElementById('active');
       var line1 = document.getElementById('line1');
       var line2 = document.getElementById('line2');
       var line3 = document.getElementById('line3');
       var line4 = document.getElementById('line4');
       var line5 = document.getElementById('line5');
       var line6 = document.getElementById('line6');
       var line7 = document.getElementById('line7');
       var line8 = document.getElementById('line8');
       var line9 = document.getElementById('line9');
       var line10 = document.getElementById('line10');




        line1.onclick= function() {
           slider.style.transform = 'translateX(0)';
           active.style.top = '0px';
        }

        line2.onclick= function() {
           slider.style.transform = 'translateX(-10%)';
           active.style.top = '32px';
        }

        line3.onclick= function() {
           slider.style.transform = 'translateX(-20%)';
           active.style.top = '64px';
        }

        line4.onclick= function() {
           slider.style.transform = 'translateX(-30%)';
           active.style.top = '96px';
        }

        line5.onclick= function() {
           slider.style.transform = 'translateX(-40%)';
           active.style.top = '128px';
        }

        line6.onclick= function() {
           slider.style.transform = 'translateX(-50%)';
           active.style.top = '160px';
        }

        line7.onclick= function() {
           slider.style.transform = 'translateX(-60%)';
           active.style.top = '192px';
        }

        line8.onclick= function() {
           slider.style.transform = 'translateX(-70%)';
           active.style.top = '224px';
        }

        line9.onclick= function() {
           slider.style.transform = 'translateX(-80%)';
           active.style.top = '256px';
        }

        line10.onclick= function() {
           slider.style.transform = 'translateX(-90%)';
           active.style.top = '288px';
        }

编辑：这里是滑动的 html div:

<div id="slider">
                <div class="msg-col">
                    <h1> {{the_word1}} </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>: to mark or show a difference in : constitute a contrasting element that distinguishes
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word2 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>: something for which one is responsible
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word3 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>the action or process of negotiating or being negotiated —often used in plural
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word4 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>suggestion made to someone to choose something over the others
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word5 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>suggestion made to someone to choose something over the others
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word6 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>suggestion made to someone to choose something over the others
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word7 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>suggestion made to someone to choose something over the others
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word8 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>suggestion made to someone to choose something over the others
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word9 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>suggestion made to someone to choose something over the others
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>
                <div class="msg-col">
                    <h1> the_word10 </h1>
                    <p class="wCaterory">  word1_category </p>
                    <p>suggestion made to someone to choose something over the others
                         It has alot of other meanings too but those are enough for today I guess. I mean 
                         I can add some more if you want me to? By the way there are other words comming too.</p>
                    <a href="">Know it</a>
                </div>

            </div>
<div class="controller">
            <div id="line1"></div>
            <div id="line2"></div>
            <div id="line3"></div>
            <div id="line4"></div>
            <div id="line5"></div>
            <div id="line6"></div>
            <div id="line7"></div>
            <div id="line8"></div>
            <div id="line9"></div>
            <div id="line10"></div>
            <div id="active"></div>

        </div>

CSS:

.msg-container{
 width: 600px;
 height: 320px;
 position: absolute;
 left: 14%;
 top: 57%;
 transform: translateY(-50%);
 overflow: hidden;
 
 
 }


 #slider{
 display: inline-flex;
 transition: 2s;
 

 }

 .msg-col {
 width: 600px;
 height:280px;
 
 }


 .msg-col h1{
 color: #fff;
 font-size: 80px;
 font-weight: 100;
 margin: 10px;
 }

 .msg-col p{
 color: #ddd;
 font-size: 15px;
 line-height: 25px;
 }

 .msg-col a{
 display: inline-block;
 text-decoration: none;
 color: #555;
 background: #fff;
 font-size: 15px;
 padding: 10px 35px;
 border-radius: 30px;
 margin-top:25px;
 }



 .controller {
 width: 1px;
 height: 320px;
 display: block;
 background: #c0c0c0;
 position: absolute;
 top: 55%;
 right: 50px;
 transform: translateY(-50%);
 }


 #line1,#line2, #line3, #line4, #line5, #line6, #line7, #line8, #line9, 
#line10 {
 height: 32px;
 width: 10px;
 cursor: pointer;
 transform: translateX(-50%);
 
 
 }


 #active{
 width: 5px;
 height: 32px;
 border-radius: 10px;
 background: #fff;
 position: absolute;
 top:0;
 transform: translateX(-50);
 }

Answer 1

你可以这样实现你想要的

function Slider(id,slideWidth,animationDuration,animationDelay)
{
    let interval;
    let slider = document.getElementById(id);
  let slides = slider.children;
  for(let slide of slides)
  {
    slide.style.width = `${slideWidth}vw`;
  }
  
  slider.style.transition = `transform ${animationDuration}ms`;
  let slidesCount = slider.children.length;
  let position = 1;
  
    return {
        startSlider()
    {
        let interval = setInterval(()=>{
      
            slider.style.transform = `translateX(-${position * slideWidth}vw)`;
          position = slidesCount - 1 == position ? 0 : position + 1;
          
      },animationDelay);
    }
  };


}

let slider = Slider("slider",50,2000,4000);

slider.startSlider();

body,html
{
  margin:0;
  padding:0;
  overflow-x:hidden;
}


 #slider{
   width:10000px;
   display:flex;
   overflow:hidden;
 }


.msg-col
{
  padding:20px;
}

 .msg-col h1{
 font-size: 20px;
 font-weight: 100;
 margin-bottom: 10px;
 }

 .msg-col p{
 color: #ddd;
 font-size: 15px;
 line-height: 25px;
 }

 .msg-col a{
 display: inline-block;
 text-decoration: none;
 color: #555;
 background: #fff;
 font-size: 15px;
 border-radius: 30px;
 margin-top:25px;
 }

<div id="slider">


<div class="slide">


  <div class="msg-col">
    <h1>The word 1</h1>
    <p class="wCaterory">  word1_category </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk  nown printer took a galley of type and scrambled it to make a type specimen book
    </p>
    <a class="navigation" href="">Know it</a>
  </div>
  
  
</div>



<div class="slide">


  <div class="msg-col">
    <h1>The word 2</h1>
    <p class="wCaterory">  word2_category </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk  nown printer took a galley of type and scrambled it to make a type specimen book
    </p>
    <a class="navigation" href="">Know it</a>
  </div>
  
  
</div>
  
<div class="slide">


  <div class="msg-col">
    <h1>The word 3</h1>
    <p class="wCaterory">  word3_category </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk  nown printer took a galley of type and scrambled it to make a type specimen book
    </p>
    <a class="navigation" href="">Know it</a>
  </div>
  
  
</div>
  
  <div class="slide">


  <div class="msg-col">
    <h1>The word 4</h1>
    <p class="wCaterory">  word3_category </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk  nown printer took a galley of type and scrambled it to make a type specimen book
    </p>
    <a class="navigation" href="">Know it</a>
  </div>
  
  
</div>
  
  
<div class="slide">


  <div class="msg-col">
    <h1>The word 5</h1>
    <p class="wCaterory">  word3_category </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk  nown printer took a galley of type and scrambled it to make a type specimen book
    </p>
    <a class="navigation" href="">Know it</a>
  </div>
  
  
</div>
  
  <div class="slide">


  <div class="msg-col">
    <h1>The word 6</h1>
    <p class="wCaterory">  word3_category </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk  nown printer took a galley of type and scrambled it to make a type specimen book
    </p>
    <a class="navigation" href="">Know it</a>
  </div>
  
  
</div>
  
  
</div>

Link to example in jsfiddle

使用我制作的功能，您可以指定幻灯片的宽度、动画持续时间和延迟，它会自动运行。它使用一个简单的js函数，主要是基于css的滑块。它有一个宽度很大的容器，因此它可以将所有幻灯片放入内联并通过 transform:translate.

旋转它们

用js自动间隔滑动div

Sliding divs automatically at an interval with js

html

javascript

slider

slide