jquery圖片庫幻燈片動畫

-1

我想做一個這樣的簡單圖片庫。 http://dimsemenov.com/plugins/royal-slider/#image-gallery當我點擊一個縮略圖圖像時，圖像元素將創建並加載圖像將出現一點時間，創建的元素將滑動到可見區域。最後一箇舊圖像元素將被刪除。jquery圖片庫幻燈片動畫

<div id="imageGallery" style="overflow:visible;display:block;"> 
<div class="preview"> 
    <div id="content" style="width:640px;height:420px;"> 
     <img id="main-Image" alt="" src="../../baContent/image1.jpg" style="display:inline; top:0;left:0;" /> 
    </div> 
</div> 
<div id="thumbnails"> 
    <a class="thumbnail" href="../../baContent/image1.jpg"><img alt="Image 1" src="../../baContent/image1-thumb.jpg"></a> 
    <a class="thumbnail" href="../../baContent/image2.jpg"><img alt="Image 2" src="../../baContent/image2-thumb.jpg"></a> 
</div>

$(document).ready(function() { 
    $(".thumbnail").click(function() { 
     $("#mainImage").animate({ "left": "-640px" }, "fast"); 
     $('#preview').css('background-image', "url('../../baContent/spinner.gif')"); 
     var img = $("<img style='left:640px;display:none;' />").attr('src', this.href).load(function() { 
      $('#mainImage').attr('src', img.attr('src')); 
      $('#preview').css('background-image', 'none'); 
      $(this).parent().prevAll().remove(); 
      $("#mainImage").animate({ "left": "-640px" }, "fast"); 
     }); 

    }); 

});

我寫了幾個代碼，但沒有成功。任何想法或教程？

來源

2012-07-19 EnzGLKba

不要重新發明輪子。滑塊是非常常見的東西，你可以從字面上找到超過100個可以使用的版本。只是谷歌jQuery滑塊。或者jQuery Slider Tutorial，如果你想通過自己的實現來學習如何完成和練習。 – Peter 2012-07-19 08:41:43

@Peter當然我使用Google搜索，但我想開發自己的算法。 – EnzGLKba 2012-07-19 08:46:45

好的，那麼谷歌的教程，有很多。因爲你要求教程。你可以從他們的代碼或解釋中學習。 – Peter 2012-07-19 08:56:34

嘗試：

$(document).ready(function() { 
    $(".thumbnail").click(function() { 
     $('#main-Image').hide(); 
     $('#preview').css('background-image', "url('../../baContent/spinner.gif')"); 

     var imgSrc = $(this).attr('href'); 
     var img = $("<img style='left:640px;display:none;' />").attr('src', imgSrc).load(function() { 
      $('#main-Image').attr('src', imgSrc); 
      $('#preview').css('background-image', 'none'); 
      $('#main-Image').fadeIn(); 
     }); 

     return false; 
    }); 
});

您可以添加你想要所有的動畫。

對於一個好的滑塊，請參閱http://bxslider.com/。

來源

2012-07-19 09:59:33 tekilatexee

我不是在尋找一個插件來完成這項工作。 – EnzGLKba 2012-07-19 10:56:02

你測試了我的代碼片段嗎？ – tekilatexee 2012-07-19 11:54:38

我測試過了，但並沒有按照我的想法工作 – EnzGLKba 2012-07-19 12:06:38

jquery圖片庫幻燈片動畫

回答

相關問題