Я пытаюсь сделать слайдер, в котором его содержимое вращается с определенным интервалом. Код работал нормально, когда он был нажат, но когда я пытался сделать его автоматическим, он не работал. Я не знаю, где именно ошибка, но я думаю, что она связана с вызовом и определением функций, любая помощь будет оценена.

Вот мой код:

<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);
 }
0
SiemGhirmai 9 Окт 2020 в 17:29

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>

Ссылка на пример в jsfiddle

С помощью созданной мной функции вы можете указать ширину слайдов, продолжительность и задержку анимации, и она работает автоматически. Он использует простую функцию js, являясь слайдером, в основном основанным на css. У него есть контейнер огромной ширины, поэтому он может размещать все слайды в линию и вращать их с помощью transform: translate.

1
Gabriel Macus 9 Окт 2020 в 16:10