이미지간에 전환을 부드럽게 만드는 방법

이미지를 페이지에 추가하는 코드를 만들었으며 이미지를 원활하게 전환하는 방법을 찾으려고 했습니까? 여기에 코드가 있습니다. 여기 jquery를 고집 할 가치가 있습니까?)

한 뒤에 새 이미지를로드 : 쉽게 만약 당신이 다음 절차를 사용해야

<!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); ' 여기 : http://jsfiddle.net/754cm/ – Ani

내가 index.js/index를 작성하면 용서해 준다. css/index.html는 작은 미리보기 이미지를 남기고 슬라이드를 통해 크기를 조정하지 않습니까? – Rich88

무슨 뜻인지 모르겠다. 그러나'setPage()'를'setInterval()'안에'quotes'에 포함 시키면 호출되지 않습니다. – Ani

가 원활하게 다른 이미지로 전환하기 위해 .. BTW 바보 같은 질문에 대한 미안 총 초보자 해요 멀리 교환하려는 이미지. 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

많은 감사합니다. Michael, 이것은 절대 생명의 은인입니다. 이 녀석은 나에게 버려져 있었고 나는 이것으로 극히 제한된 능력을 가지고 있었지만 나는 많은 멍청이들 중 가장 기술적 인 사람이다! – Rich88

이미지간에 전환을 부드럽게 만드는 방법

답변

관련 문제