我的幻燈片無法正常工作

嗨我還是相當新的代碼，我正在一個新的網站上工作，我想實現一個使用jquery自動幻燈片，但它工作古怪。我的幻燈片無法正常工作

它允許圖片改變，但在第一次成功滑動之後，其他圖片可以滑動到幻燈片下方。

我的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>

我的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; 
}

我的jQuery：

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

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

});

來源

2016-03-20 sane_Orane

試試這個：

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>

另外，我建議你使用的東西沿着OwlCarousel的線，它會讓你的生活更輕鬆： https://github.com/OwlFonk/OwlCarousel

來源

2016-03-20 15:07:52

我的幻燈片無法正常工作

回答

相關問題