Добавить элементы управления для простого выцветания в слайд-шоу jQuery

У меня есть слайд-шоу jquery, которое вызывает определенные элементы, чтобы показывать один за другим; я хотел бы добавить 5 дивы, что если я парить один из них ползунок будет прыгать на определенный слайдДобавить элементы управления для простого выцветания в слайд-шоу jQuery

Это мой слайд-шоу

$(document).ready(function(){ 
    $('.pic').hide(); 
    i=1; 
    function slider(){ 

    $('#pic-'+i).fadeIn('0').delay(4000).fadeOut('0',function(){ 
    i=i+1;if(i==6){i=1;}slider(); 

    }); 

    } 
    slider(); 
    });

И это мой HTML

  <div class="pictures"> 
       <div class="pic" id="pic-1"> 
        <img src="img/1.jpg" id="tes-1" class="tes" > 
       </div> 
       <div class="pic" id="pic-2"> 
        <img src="img/2.jpg" id="tes-2" class="tes"> 
       </div> 
       <div class="pic" id="pic-3"> 
        <img src="img/3.jpg" id="tes-3" class="tes"> 
       </div> 
       <div class="pic" id="pic-4"> 
        <img src="img/4.jpg" id="tes-4" class="tes"> 
       </div> 
       <div class="pic" id="pic-5"> 
        <img src="img/5.jpg" id="tes-5" class="tes"> 
       </div> 
      </div>

Я полный новичок, поэтому, пожалуйста, проявляйте терпение со мной и пытайтесь помочь мне, так как у меня нет никого, кроме вас, ребята, чтобы спросить

источник

2015-01-29 Information_For_Sell

Я предлагаю вам сделать небольшое исследование, сделать попытку, и показать нам, что вы пытались и где * конкретно * вы застряли. – showdev

@showdev Я ценю ваш ответ, и, как я уже упоминал ранее, я совершенно новичок в этом, и я получил это далеко, возможно, посмотрев примерно 20 учебных уроков и прочитав несколько потоков SO, но я не нашел ничего, чтобы помочь мне в этом, и я не делал ничего достойного показа, лучшее, что я мог сделать, это сделать функцию javascript, которая будет показывать ту же картину, что и этот слайдер, и когда я сделал это, слайд-шоу начинало застревать, когда я наводил вид, поэтому именно поэтому я здесь с просьбой о помощи –

Вы должны взглянуть на этот чистый слайдер CSS, который я создал, может быть, вы будете находят это полезным и простым в использовании!

HTML:

<!-- Slider --> 
<div id="slider"> 
    <div class="slides"> 
    <div class="slider"> 
     <div class="legend"></div> 
     <div class="content"> 
     <div class="content-txt"> 
      <h1>Lorem ipsum dolor</h1> 
      <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2> 
     </div> 
     </div> 
     <div class="image"> 
     <img src="http://img11.hostingpics.net/pics/767361311.jpg"> 
     </div> 
    </div> 
    <div class="slider"> 
     <div class="legend"></div> 
     <div class="content"> 
     <div class="content-txt"> 
      <h1>Lorem ipsum dolor</h1> 
      <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2> 
     </div> 
     </div> 
     <div class="image"> 
     <img src="http://img11.hostingpics.net/pics/412998972.jpg"> 
     </div> 
    </div> 
    <div class="slider"> 
     <div class="legend"></div> 
     <div class="content"> 
     <div class="content-txt"> 
      <h1>Lorem ipsum dolor</h1> 
      <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2> 
     </div> 
     </div> 
     <div class="image"> 
     <img src="http://img11.hostingpics.net/pics/990696943.jpg"> 
     </div> 
    </div> 
    <div class="slider"> 
     <div class="legend"></div> 
     <div class="content"> 
     <div class="content-txt"> 
      <h1>Lorem ipsum dolor</h1> 
      <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2> 
     </div> 
     </div> 
     <div class="image"> 
     <img src="http://img11.hostingpics.net/pics/601549194.jpg"> 
     </div> 
    </div> 
    </div> 
    <div class="switch"> 
    <ul> 
     <li> 
     <div class="on"></div> 
     </li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </div> 
</div>

CSS:

/* Slider */ 
#slider{ 
    width:100%; 
    height:500px; 
    position:relative; 
    overflow:hidden; 
} 
@keyframes load{ 
    from{left:-100%;} 
    to{left:0;} 
} 
.slides{ 
    width:400%; 
    height:100%; 
    position:relative; 
    -webkit-animation:slide 30s infinite; 
    -moz-animation:slide 30s infinite; 
    animation:slide 30s infinite; 
} 
.slider{ 
    width:25%; 
    height:100%; 
    float:left; 
    position:relative; 
    z-index:1; 
    overflow:hidden; 
} 
.slide img{ 
    width:100%; 
    height:100%; 
} 
.slide img{ 
    width:100%; 
    height:100%; 
} 
.image{ 
    width:100%; 
    height:100%; 
} 
.image img{ 
    width:100%; 
    height:100%; 
} 

/* Legend */ 
.legend{ 
    border:500px solid transparent; 
    border-left:800px solid rgba(52, 73, 94, .7); 
    border-bottom:0; 
    position:absolute; 
    bottom:0; 
} 

/* Contents */ 
.content{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    overflow:hidden; 
} 
.content-txt{ 
    width:400px; 
    height:150px; 
    float:left; 
    position:relative; 
    top:300px; 
    -webkit-animation:content-s 7.5s infinite; 
    -moz-animation:content-s 7.5s infinite; 
    animation:content-s 7.5s infinite; 
} 
.content-txt h1{ 
    font-family:Arial; 
    text-transform:uppercase; 
    font-size:24px; 
    color:#fff; 
    text-align:left; 
    margin-left:30px; 
    padding-bottom:10px; 
} 
.content-txt h2{ 
    font-family:arial; 
    font-weight:normal; 
    font-size:14px; 
    font-style:italic; 
    color:#fff; 
    text-align:left; 
    margin-left:30px; 
} 

/* Switch */ 
.switch{ 
    width:120px; 
    height:10px; 
    position:absolute; 
    bottom:50px; 
    z-index:99; 
    left:30px; 
} 
.switch > ul{ 
    list-style:none; 
} 
.switch > ul > li{ 
    width:10px; 
    height:10px; 
    border-radius:50%; 
    background:#333; 
    float:left; 
    margin-right:5px; 
    cursor:pointer; 
} 
.switch ul{ 
    overflow:hidden; 
} 
.on{ 
    width:100%; 
    height:100%; 
    border-radius:50%; 
    background:#f39c12; 
    position:relative; 
    -webkit-animation:on 30s infinite; 
    -moz-animation:on 30s infinite; 
    animation:on 30s infinite; 
} 

/* Animation */ 
@-webkit-keyframes slide{ 
    0%,100%{ 
    margin-left:0%; 
    } 
    21%{ 
    margin-left:0%; 
    } 
    25%{ 
    margin-left:-100%; 
    } 
    46%{ 
    margin-left:-100%; 
    } 
    50%{ 
    margin-left:-200%; 
    } 
    71%{ 
    margin-left:-200%; 
    } 
    75%{ 
    margin-left:-300%; 
    } 
    96%{ 
    margin-left:-300%; 
    } 
} 
@-moz-keyframes slide{ 
    0%,100%{ 
    margin-left:0%; 
    } 
    21%{ 
    margin-left:0%; 
    } 
    25%{ 
    margin-left:-100%; 
    } 
    46%{ 
    margin-left:-100%; 
    } 
    50%{ 
    margin-left:-200%; 
    } 
    71%{ 
    margin-left:-200%; 
    } 
    75%{ 
    margin-left:-300%; 
    } 
    96%{ 
    margin-left:-300%; 
    } 
} 
@keyframes slide{ 
    0%,100%{ 
    margin-left:0%; 
    } 
    21%{ 
    margin-left:0%; 
    } 
    25%{ 
    margin-left:-100%; 
    } 
    46%{ 
    margin-left:-100%; 
    } 
    50%{ 
    margin-left:-200%; 
    } 
    71%{ 
    margin-left:-200%; 
    } 
    75%{ 
    margin-left:-300%; 
    } 
    96%{ 
    margin-left:-300%; 
    } 
} 

@-webkit-keyframes content-s{ 
    0%{left:-420px;} 
    10%{left:0px;} 
    30%{left:0px;} 
    40%{left:0px;} 
    50%{left:0px;} 
    60%{left:0px;} 
    70%{left:0;} 
    80%{left:-420px;} 
    90%{left:-420px;} 
    100%{left:-420px;} 
} 
@-moz-keyframes content-s{ 
    0%{left:-420px;} 
    10%{left:0px;} 
    30%{left:0px;} 
    40%{left:0px;} 
    50%{left:0px;} 
    60%{left:0px;} 
    70%{left:0;} 
    80%{left:-420px;} 
    90%{left:-420px;} 
    100%{left:-420px;} 
} 
@keyframes content-s{ 
    0%{left:-420px;} 
    10%{left:20px;} 
    15%{left:0px;} 
    30%{left:0px;} 
    40%{left:0px;} 
    50%{left:0px;} 
    60%{left:0px;} 
    70%{left:0;} 
    80%{left:-420px;} 
    90%{left:-420px;} 
    100%{left:-420px;} 
} 

@-webkit-keyframes on{ 
    0%,100%{ 
    margin-left:0%; 
    } 
    21%{ 
    margin-left:0%; 
    } 
    25%{ 
    margin-left:15px; 
    } 
    46%{ 
    margin-left:15px; 
    } 
    50%{ 
    margin-left:30px; 
    } 
    71%{ 
    margin-left:30px; 
    } 
    75%{ 
    margin-left:45px; 
    } 
    96%{ 
    margin-left:45px; 
    } 
} 

@-moz-keyframes on{ 
    0%,100%{ 
    margin-left:0%; 
    } 
    21%{ 
    margin-left:0%; 
    } 
    25%{ 
    margin-left:15px; 
    } 
    46%{ 
    margin-left:15px; 
    } 
    50%{ 
    margin-left:30px; 
    } 
    71%{ 
    margin-left:30px; 
    } 
    75%{ 
    margin-left:45px; 
    } 
    96%{ 
    margin-left:45px; 
    } 
} 

@keyframes on{ 
    0%,100%{ 
    margin-left:0%; 
    } 
    21%{ 
    margin-left:0%; 
    } 
    25%{ 
    margin-left:15px; 
    } 
    46%{ 
    margin-left:15px; 
    } 
    50%{ 
    margin-left:30px; 
    } 
    71%{ 
    margin-left:30px; 
    } 
    75%{ 
    margin-left:45px; 
    } 
    96%{ 
    margin-left:45px; 
    } 
}

Вот демо: https://codepen.io/Eliteware/full/BoBgqV/

источник

2017-10-17 12:19:51

Добавить элементы управления для простого выцветания в слайд-шоу jQuery

ответ

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