jQuery 슬라이드 쇼의 간단한 페이드에 컨트롤 추가

jquery 슬라이드 쇼에는 특정 요소를 차례로 표시하도록 호출하는 jquery 슬라이드 쇼가 있습니다. 나는 그들 중 하나를 올려 놓으면 슬라이더가 특정 슬라이드jQuery 슬라이드 쇼의 간단한 페이드에 컨트롤 추가

로 이동됩니다 5 개 된 div를 추가 할이 내 슬라이드 쇼

$(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 스레드를 통해 읽은 것 같습니다. 그러나 이것에 관해서는 아무 것도 발견하지 못했습니다. 그리고 내가 보여줄만한 가치가있는 것은 아무것도 만들지 않았다. 내가 할 수있는 최선의 방법은 그 슬라이더와 같은 그림을 보여줄 자바 스크립트 함수를 만드는 것이었다. 그리고 내가했을 때 슬라이드 쇼가 시작될 때마다 붙어 다니기 시작했다. 그래서 나는 여기에있다. 너의 도움을 청하다. –

내가 만든이 순수한 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 슬라이드 쇼의 간단한 페이드에 컨트롤 추가

답변

관련 문제