Как дать КАС только карусельного автовопроизведение с помощью JavaScript

-1

ниже HTML-Как дать КАС только карусельного автовопроизведение с помощью JavaScript

label, a { 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
} 
 

 
* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
label, #active, img { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
} 
 

 
#slider { 
 
    margin: 0 auto; 
 
} 
 

 
/* NEW EXPERIMENT */ 
 
/* Slider Setup */ 
 
input { 
 
    display: none; 
 
} 
 

 
#slide1:checked ~ #slides .inner { 
 
    margin-left: 0; 
 
} 
 

 
#slide2:checked ~ #slides .inner { 
 
    margin-left: -100%; 
 
} 
 

 
#slide3:checked ~ #slides .inner { 
 
    margin-left: -200%; 
 
} 
 

 
#slide4:checked ~ #slides .inner { 
 
    margin-left: -300%; 
 
} 
 

 
#slide5:checked ~ #slides .inner { 
 
    margin-left: -400%; 
 
} 
 

 
#overflow { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
article img { 
 
    width: 100%; 
 
} 
 

 
#slides .inner { 
 
    width: 500%; 
 
} 
 

 
#slides article { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
/* Slider Styling */ 
 
/* Control Setup */ 
 
#controls { 
 
    margin: -25% 0 0 0; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
#controls label { 
 
    width: 50px; 
 
    height: 50px; 
 
    opacity: 0.3; 
 
} 
 
#controls label:hover { 
 
    opacity: 0.8; 
 
} 
 

 
#slide1:checked ~ #controls label:nth-child(2), 
 
#slide2:checked ~ #controls label:nth-child(3), 
 
#slide3:checked ~ #controls label:nth-child(4), 
 
#slide4:checked ~ #controls label:nth-child(5), 
 
#slide5:checked ~ #controls label:nth-child(1) { 
 
    background: url("http://csscience.com/responsiveslidercss3/next.png") no-repeat; 
 
    float: right; 
 
    margin: 0 -70px 0 0; 
 
    display: block; 
 
} 
 

 
#slide1:checked ~ #controls label:nth-child(5), 
 
#slide2:checked ~ #controls label:nth-child(1), 
 
#slide3:checked ~ #controls label:nth-child(2), 
 
#slide4:checked ~ #controls label:nth-child(3), 
 
#slide5:checked ~ #controls label:nth-child(4) { 
 
    background: url("http://csscience.com/responsiveslidercss3/prev.png") no-repeat; 
 
    float: left; 
 
    margin: 0 0 0 -70px; 
 
    display: block; 
 
} 
 

 
/* Info Box */ 
 
.info { 
 
    line-height: 20px; 
 
    margin: 0 0 -150%; 
 
    position: absolute; 
 
    padding: 30px 30px; 
 
    opacity: 0; 
 
    text-align: left; 
 
} 
 

 
.info h3 { 
 
    margin: 0 0 5px; 
 
    font-size: 22px; 
 
    font-style: normal; 
 
} 
 

 
/* Animation */ 
 
#slides .inner { 
 
    -webkit-transform: translateZ(0); 
 
    -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); 
 
    -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); 
 
    -ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); 
 
    -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); 
 
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); 
 
    /* easeInOutQuart */ 
 
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); 
 
    -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); 
 
    -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); 
 
    -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); 
 
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); 
 
    /* easeInOutQuart */ 
 
} 
 

 
#slider { 
 
    -webkit-transform: translateZ(0); 
 
    -webkit-transition: all 0.5s ease-out; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
#controls label { 
 
    -webkit-transform: translateZ(0); 
 
    -webkit-transition: opacity 0.2s ease-out; 
 
    -moz-transition: opacity 0.2s ease-out; 
 
    -o-transition: opacity 0.2s ease-out; 
 
    transition: opacity 0.2s ease-out; 
 
} 
 

 
#slide1:checked ~ #slides article:nth-child(1) .info, 
 
#slide2:checked ~ #slides article:nth-child(2) .info, 
 
#slide3:checked ~ #slides article:nth-child(3) .info, 
 
#slide4:checked ~ #slides article:nth-child(4) .info, 
 
#slide5:checked ~ #slides article:nth-child(5) .info { 
 
    opacity: 1; 
 
    -webkit-transition: all 1s ease-out 0.6s; 
 
    -moz-transition: all 1s ease-out 0.6s; 
 
    -o-transition: all 1s ease-out 0.6s; 
 
    transition: all 1s ease-out 0.6s; 
 
} 
 

 
.info, #controls, #slides, #active, #active label, .info h3 { 
 
    -webkit-transform: translateZ(0); 
 
    -webkit-transition: all 0.5s ease-out; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
/* Responsive Styling */ 
 
@media only screen and (max-width: 850px) and (min-width: 450px) { 
 
    #slider #controls { 
 
    margin: -25% 0 0 15%; 
 
    width: 70%; 
 
    height: 50px; 
 
    } 
 

 
    #slider #controls label { 
 
    -moz-transform: scale(0.8); 
 
    -webkit-transform: scale(0.8); 
 
    -o-transform: scale(0.8); 
 
    -ms-transform: scale(0.8); 
 
    transform: scale(0.8); 
 
    } 
 
} 
 
@media only screen and (max-width: 450px) { 
 
    #slider #controls { 
 
    margin: -28% 0 0 24%; 
 
    width: 50%; 
 
    height: 50px; 
 
    } 
 

 
    #slider #slides { 
 
    padding: 1% 0; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    border-radius: 0px; 
 
    } 
 

 
    #slider #controls label { 
 
    -moz-transform: scale(0.6); 
 
    -webkit-transform: scale(0.6); 
 
    -o-transform: scale(0.6); 
 
    -ms-transform: scale(0.6); 
 
    transform: scale(0.6); 
 
    } 
 
} 
 
@media only screen and (min-width: 850px) { 
 
    body { 
 
    padding: 0 80px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width"> 
 
</head> 
 
<body> 
 
    <article id="slider"> 
 
     <!-- Slider Setup --> 
 
     <input checked type="radio" name="slider" id="slide1" /> 
 
     <input type="radio" name="slider" id="slide2" /> 
 
     <input type="radio" name="slider" id="slide3" /> 
 
     <input type="radio" name="slider" id="slide4" /> 
 
     <input type="radio" name="slider" id="slide5" /> 
 
     <!-- The Slider --> 
 
     <div id="slides"> 
 
      <div id="overflow"> 
 
       <div class="inner"> 
 
        <article> 
 
         <div class="info"> 
 
          <h3>Cloud Dragon</h3> 
 
          by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a> 
 
         </div> 
 
         <img src="http://csscience.com/responsiveslidercss3/CouldDragonByBjzaba.png" /> 
 
        </article> 
 
        <article> 
 
         <div class="info"> 
 
          <h3>Mountain Fort</h3> 
 
          by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a> 
 
         </div> 
 
         <img src="http://csscience.com/responsiveslidercss3/MountainFortByBjzaba.png" /> 
 
        </article> 
 
        <article> 
 
         <div class="info"> 
 
          <h3>Mountain Outpost</h3> 
 
          by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a> 
 
         </div> 
 
         <img src="http://csscience.com/responsiveslidercss3/MountainOutpostByBjzaba.png" /> 
 
        </article> 
 
        <article> 
 
         <div class="info"> 
 
          <h3>Cliffs</h3> 
 
          by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a> 
 
         </div> 
 
         <img src="http://csscience.com/responsiveslidercss3/CliffsByBjzaba.png" /> 
 
        </article> 
 
        <article> 
 
         <div class="info"> 
 
          <h3>Hill Fort</h3> 
 
          by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a> 
 
         </div> 
 
         <img src="http://csscience.com/responsiveslidercss3/HillFortByBjzaba.png" /> 
 
        </article> 
 
       </div> 
 
       <!-- .inner --> 
 
      </div> 
 
      <!-- #overflow --> 
 
     </div> 
 
     <!-- #slides --> 
 
     <!-- Controls and Active Slide Display --> 
 
     <div id="controls"> 
 
      <label for="slide1"></label> 
 
      <label for="slide2"></label> 
 
      <label for="slide3"></label> 
 
      <label for="slide4"></label> 
 
      <label for="slide5"></label> 
 
     </div> 
 
     <!-- #controls --> 
 
     <div id="active"> 
 
      <label for="slide1"></label> 
 
      <label for="slide2"></label> 
 
      <label for="slide3"></label> 
 
      <label for="slide4"></label> 
 
      <label for="slide5"></label> 
 
     </div> 
 
     <!-- #active --> 
 
    </article> 
 
    <!-- #slider --> 
 
</body> 
 
</html>

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

ngOnInit() { 
    // let i = 0; 
    setInterval(() => { 
     $('input[type=radio]').each((o: any,val:any) => { 
      setTimeout(() => { 
       $(val).prop('checked', true); 
      },1000); 
     }); 
    },1000); 
}

Я использую выше JavaScript для автоматического слайде но запуск сразу

источник

2016-06-13 Sagar Sinha

Вы можете сделать это с помощью CSS анимации. Попробуйте реализовать его. Если вы застряли, обновите свой вопрос с помощью обновленного кода. –

Я пробовал на codepen https://codepen.io/christopherjanzen/pen/HcidC с анимацией: все 30 секунд бесконечны; –

Недостатки - это потому, что у вас нет никаких попыток, вы просите нас закодировать его для вас, вместо того, чтобы называть «ерунду», исправить свой вопрос. PS Я не проголосовал –

$(document).ready(function() { 
     setInterval(test, 4000); 
     var i = 1; 

     function test() { 
      i = (i % 5) + 1; 
      $('#slide' + i).prop('checked', true); 
     } 
});

источник

2016-06-14 15:06:50

Ответ? –

Я исправил его ниже, но ответ на него, но с использованием jquery ... как вы сказали, используя только css, мы не можем добиться такого же эффекта с авто-слайдом –

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

Как дать КАС только карусельного автовопроизведение с помощью JavaScript

ответ

Смежные вопросы