這是國外的網友做的h5自動幻燈片

原文連結

http://www.htmlgoodies.com/beyond/javascript/stips/create-a-simple-automated-slideshow.html

我想展示一個簡單的迴圈幻燈片在我的網站上有一天,它似乎所有的外掛我遇到過於笨重的瑣碎的目的,所以我將我的注意力轉向獨立的解決方案。 最後,我發現jQuery是所有我需要完成我想。 在今天的文章中,我將向您展示我是如何做到的。

定義影象

一些人包括JavaScript源影象列表,但我寧願把它們在HTML領域,因為它們是頁面內容的一部分。 我都懶得算出所有影象的維度,這就是在JS完成的。 我原來的列表包含大量的t恤與religion-themed圖形和文字。 類似“崇拜我或我將永遠折磨你! 有美好的一天。 BFF——神”。 你可能不認為這是一個特別有趣的話題,但在右邊

<div id="slideshow">
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/3435/mustang.jpg" alt="mustang.jpg"><br>
    A newer Mustang.
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/3798/camaro.jpg" alt="camaro.jpg"><br>
    A modern Camaro.
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/6859/classic.jpg" alt="classic.jpg"><br>
    An oldie but a goodie!
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/1767/classic2.jpg" alt="classic2.jpg"><br>
    More old cars.
  </div>
  <div>
    <img src="http://www.htmlgoodies.com/imagesvr_ce/5199/video_game_car.jpg" alt="video_game_car.jpg"><br>
    A good rendering of a classic race car.
  </div>
</div>
 

body {
   background-color: gray;
}

#slideshow { 
    position: relative; 
    width: 300px; 
    height: 510px; 
    padding: 10px; 
}

#slideshow > div { 
    position: absolute; 
    text-align: center;
    overflow: visible;
    display: none;
}
#slideshow > div > img {
    border: 2px solid white;
    box-shadow: 0 0 20px white; 
}
 

$("#slideshow > div").hide();
 
setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  5000);

定心圖片

定心不同大小影象動態沒有在公園裡散步,主要是因為這取決於大小的影象,這是在載入之前不知道。 這個問題的解決方案是建立一個新的影象物件和分配其src的形象元素。 導致瀏覽器下載圖片,從而分配它的維度:

jQuery.fn.setDivSize = function(extraHeight, extraWidth) {
  var img = new Image();
  img.src = this.children('img').attr('src');
  //the extra height and width are to accommodate
  //the text below the images.
  this.height(img.height + extraHeight)
      .width (img.width  + extraHeight);
  return this;
}

定心功能

這是中心的功能影象相對於其父母或包含基於一個布林引數視窗(真的是父母):

jQuery.fn.center = function( parent ) {
    parent = $( parent ? this.parent() : window );
    
    this.css({
        "position": "absolute",
        "top":  (((parent.height() - this.outerHeight()) / 2) + parent.scrollTop()  + "px"),
        "left": (((parent.width()  - this.outerWidth())  / 2) + parent.scrollLeft() + "px")
    });
    return this;
}

把它放在一起

這一次,我包括一些settimeout給元素一個機會完全呈現。 否則,我注意到在影象邊緣不一致。

$(function() { 
  setTimeout(function(){
    //display the first image
    $('#slideshow > div:first')
      .setDivSize(30, 40)
      .center(false)
      .fadeIn(1000);
    
    //loop through the remaining images
    setInterval(function() {
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .setDivSize(30,40)
        .center(false)
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  5000);
  }, 500 );
});