如何使過渡圖像之間的平滑

我做了一些代碼，添加圖像到頁面中，並試圖找出如何順利圖像之間的過渡？這是代碼。這裏值得堅持jQuery嗎？我是一個新手總額爲BTW愚蠢的問題，很抱歉，如果它很容易..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Adweek</title> 
     <style type="text/css"> 
     * { 
      margin:0; 
      padding:0; 
      border:0; 
     } 
     html, body, iframe { 
      height:100%; 
      width:100%; 
      overflow:hidden; 
     } 

     </style> 
     <script type="text/javascript"> 
      var pages = new Array(); //this will hold your pages 
      pages[0] = 'page1.html'; 
      pages[1] = 'page2.html'; 
      pages[2] = 'page3.html'; 
      pages[3] = 'page4.html'; 
      pages[4] = 'page5.html'; 
      pages[5] = 'page6.html'; 
      pages[6] = 'page7.html'; 
      pages[7] = 'page8.html'; 
      pages[8] = 'page9.html'; 
      pages[9] = 'page10.html'; 
      pages[10] = 'page11.html'; 
      var time = 10; // set this to the time you want it to rotate in seconds // do not edit 
      var i = 1; 
      function setPage() { 
       if(i == pages.length){ 
        i = 0; 
       } 
       document.getElementById('holder').setAttribute('src',pages[i]); 
       i++; 
      } 
      setInterval("setPage()",time * 1000); // do not edit 
     </script> 
    </head> 
    <body> 
     <iframe id="holder" src="page1.html" frameborder="0" scrolling="no"></iframe> 
    </body> 
</html>

來源

2014-03-28 Rich88

你setInterval函數是錯誤的。讓它 - 'setInterval（function（）{setPage（）}，time * 1000）;' here： http://jsfiddle.net/754cm/ – Ani

原諒我，但如果我做一個index.js /索引。 css/index.html給我留下了一個小縮略圖，而不是通過幻燈片縮放？ – Rich88

我不確定你的意思。但是如果你在'setInterval（）'中的'quotes'中包含'setPage（）'，它將不會被調用。 – Ani

爲了平滑地過渡到另一個圖像，您需要使用以下步驟：

1）落後裝入新形象您希望從中切換的圖像。無論你是通過在div的背景中加載新圖像還是通過克隆現有圖像元素來實現這一點。

2）淡出當前圖像。這將從後面顯示圖像。

3）清理 - 刪除您創建的任何冗餘元素或css。

Example fiddle - 單擊圖像導致下一個加載。

我已經評論了JS代碼，希望它可以讓你修改代碼以適應自己的目的。

(function() { 
    "use strict"; 

    function swapImage(newIndex, preload) { 
     var newImgSrc; 
     var $img = $imgContainer.find('img'); 
     var imgIsAnimating = $img.is(':animated'); 

     if (!imgIsAnimating) { 
      newImgSrc = images[newIndex]; 
      // Set background-image to new image 
      $imgContainer.css({'background-image': 'url(' + newImgSrc + ')'}); 

      //Set data-index to the new index value 
      $imgContainer.data('index', newIndex); 

      // Fade old image 
      $imgContainer.find('img').animate({ opacity: 0 }, function() { 
       //** Callback upon fade animation completed **/ 
       imageSwapTidyUp(newImgSrc); 
      }); 

     } 
    } 

    function imageSwapTidyUp(newImgSrc) { 
     var $img = $imgContainer.find('img'); 
     // Change img src to new image 
     $img.prop('src', newImgSrc); 
     // Make img opaque 
     $img.animate({ opacity: 1 }, 100); 
    } 

    function addArrayNextIndexSupport() { 
     // Modify the Array object prototype, add nextIndex method 
     if (!Array.prototype.nextIndex) { 
      Array.prototype.nextIndex = function (currentIndex) { 
       // currentIndex + 1 if in bounds, else 0 
       return currentIndex < this.length - 1 ? currentIndex + 1 : 0; 
      } 
     } 
    } 

    //** On initialisation **// 

    // Array holding all the images to be loaded 
    var images = [ 
     'http://s30.postimg.org/8877xxo69/image.jpg', 
     'http://s14.postimg.org/utnk4hm8h/image.jpg', 
     'http://s22.postimg.org/4cy006wbl/firecat.jpg', 
     'http://s27.postimg.org/456i0ge43/mad_baby.jpg' 
    ]; 
    var $imgContainer; 

    // Adds nextIndex to Array object 
    addArrayNextIndexSupport(); 

    //** On DOM Ready **// 
    $(function() { 
     // Cache a reference to .img-container 
     $imgContainer = $('.img-container'); 

     $imgContainer 
      .data('index', 0) // Set data-index to 0 on init 
      .on('click', function() { 
       var newIndex = images.nextIndex($(this).data('index')); 
       swapImage(newIndex); 
      }); 
    }); 
}());

CSS

.img-container { 
    background-repeat: no-repeat; 
    background-position: top left; 
    width: 620px; 
    height: 465px; 
} 
.img-container img { 
    display: block; 
}

HTML

<div class="img-container"> 
    <img src="http://s30.postimg.org/8877xxo69/image.jpg" alt=""> 
</div>

來源

2014-03-28 15:54:28 michaelward82

非常感謝邁克爾，這是一個絕對的生活救星。如果這樣做會讓我傾倒，而且我的能力非常有限，但是我是一羣瓦力最強的技術！ – Rich88

如何使過渡圖像之間的平滑

回答

相關問題