Slaytım düzgün çalışmıyor

Merhaba Hala kod yazmak için oldukça yeni, yeni bir web sitesinde çalışıyorum ve jquery kullanarak otomatik bir slayt gösterisi uygulamak istiyorum ancak çok çalışkan.Slaytım düzgün çalışmıyor

Resimlerin başarılı olmasına izin verir, ancak ilk başarılı slayttan sonra resimler slayt gösterisinin altında görünür şekilde kayarak görüntülenir.

Benim html:

<!doctype html> 
<head> 
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

    <!-- <link rel="external" type="text/javascript" href="jquery.js"> --> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

<body> 
    <script src="jquery.js"></script> 

    <div class="slideshow"> 

     <div> 
      <img src="file:///C:/Users/angela/Documents/sandbox/photos/sampleone.png" alt='' width='100%' height='100%'> 
     </div> 

     <div> 
      <img src="file:///C:/Users/angela/Documents/sandbox/photos/sampletwo.png" alt='' width='100%' height='100%'> 
     </div> 

     <div> 
      <img src="file:///C:/Users/angela/Documents/sandbox/photos/wood.png" alt='' width='100%' height='100%'> 
     </div> 

    </div> 

</body> 
</html>

Benim css:

.slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
} 

.slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

Benim jQuery:

$(document).ready(function(){ 
    $('.slideshow img:gt(0)').hide(); 

setInterval(function() { 
    $('.slideshow :first-child') 
    .fadeOut(1000) 
    .next('img') 
    .fadeIn(1000) 
    .end() 
    .appendTo('.slideshow');}, 
    3000); 

});

kaynak

2016-03-20 sane_Orane

bu deneyin:

function startSlides(start, end, delay) { 
 
     setTimeout(slideshow(start, start, end, delay), delay); 
 
    } 
 

 
    function slideshow(frame, start, end, delay) { 
 
     return (function() { 
 
      $('#slideshow' + frame).fadeOut(); 
 
      if (frame == end) { 
 
      frame = start; 
 
      } else { 
 
      frame += 1; 
 
      } 
 
      setTimeout(function() { 
 
      $('#slideshow' + frame).fadeIn(); 
 
      }, 850); 
 
      setTimeout(slideshow(frame, start, end, delay), delay + 850); 
 
     }) 
 
     } 
 
     // usage: startSlides(first frame, end frame, delay time); 
 
    startSlides(1, 4, 5000);

.slide { 
 
    height: 200px; 
 
    width: 300px; 
 
    padding: 1em; 
 
    margin: 1em auto; 
 
    display: table; 
 
} 
 
.slide div { 
 
    border: 2px solid #fff; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    color: #fff; 
 
    font-family: monospace; 
 
    font-size: 3em; 
 
} 
 
#slideshow1 { 
 
    background: #faa; 
 
} 
 
#slideshow2 { 
 
    background: #afa; 
 
} 
 
#slideshow3 { 
 
    background: #aaf; 
 
} 
 
#slideshow4 { 
 
    background: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="slideshow1" class="slide"> 
 
    <div>frame 1</div> 
 
</div> 
 
<div id="slideshow2" class="slide" style="display: none"> 
 
    <div>frame 2</div> 
 
</div> 
 
<div id="slideshow3" class="slide" style="display: none"> 
 
    <div>frame 3</div> 
 
</div> 
 
<div id="slideshow4" class="slide" style="display: none"> 
 
    <div>frame 4</div> 
 
</div>

Ayrıca

, ben OwlCarousel çizgisinde bir şey kullanarak öneriyoruz, bu hayatınızı kolaylaştıracak: https://github.com/OwlFonk/OwlCarousel

kaynak

2016-03-20 15:07:52

Slaytım düzgün çalışmıyor

cevap

İlgili konular