时间戳

首页 > 解决方案 > 用js间隔自动滑动div

javascript - 用js间隔自动滑动div

问题描述

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

这是我的代码：

<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';
        }

编辑：这是滑动 div 的 html：

<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);
 }

标签： javascripthtmlsliderslide

解决方案

你可以像这样实现你想要的

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>

链接到 jsfiddle 中的示例

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

推荐阅读