Meine Diashow funktioniert nicht richtig

Hallo ich bin noch ziemlich neu zu code, ich arbeite an einer neuen Website und ich möchte eine automatische Diashow mit jquery implementieren, aber es funktioniert wacky.Meine Diashow funktioniert nicht richtig

Die Bilder können geändert werden, aber nach dem ersten erfolgreichen Dia gleiten die anderen Bilder sichtbar unter die Diashow.

Mein 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>

Meine 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; 
}

Mein jquery:

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

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

});

Quelle

2016-03-20 sane_Orane

Versuchen Sie folgendes:

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>

Auch ich würde empfehlen, etwas entlang der Linien von OwlCarousel verwenden, wird es Ihr Leben leichter machen: https://github.com/OwlFonk/OwlCarousel

Quelle

2016-03-20 15:07:52

Meine Diashow funktioniert nicht richtig

Antwort

Verwandte Themen