沒有插件的Jquery交叉淡入淡出

這裏有很多東西指向插件來做交叉淡入淡出和東西，但沒有一個真正適合我的需求。沒有插件的Jquery交叉淡入淡出

我有我的網頁上兩兩件事：大圖像，含有3個到4顆小縮略圖

當點擊縮略圖它在src讀取和修改的主要圖像源的新形象一個div。

我能得到它如何淡入而其他淡出一個（所以它不會去沒有什麼新的圖像褪色之前）

繼承人我的代碼：

$('.TnImage').live('click', function() { 
     var newImage = $(this).attr('src'); 
     var oldImage = $('.mainImage').attr('src') 
     $('.mainImage').fadeOut('slow'); 
     $('.mainImage').attr('src', newImage).fadeIn('slow'); 
    });

只是爲了澄清爲什麼我不想使用現有的插件，是大多數需要你知道圖像列表的圖像加載之前，縮略圖圖像是從MySQL數據庫通過php retrived，我寧願不必使2列表一爲縮略圖和1爲主要圖像，然後隱藏除了一個主要的div與我想要顯示的圖像。

我看了一個循環插件，但我會優先考慮不使用它，我知道人們繼續關於不重新發明輪子，但如果我繼續使用插件做東西，我永遠不會去學習jquery如何工作的細節。我曾經使用優秀的IMAGESWITCH，但不適用於jQuery 1.4.3，我需要這個版本的HTML數據（），所以通過解決這個問題，我現在卡住了，爲什麼我問了一個這樣做的方式無需使用插件。

來源

2011-04-14 Dizzy Bryan High

我編輯了我的答案，看看。 – 2011-04-14 14:47:27

jQuery的週期會做到這一點，但它是一個插件。

爲了做到這一點，沒有插件，你可以加載圖像，然後隱藏除第一個以外的所有圖像。點擊縮略圖時，您將淡出所選圖像。我會添加一個css類到第一個圖像，以使它更容易做到。我也會給每張圖片一個id來引用它們。使用CSS將它們放在彼此之上。在您的縮略圖圖片標籤中，您也需要對大圖片進行某種引用。

$('.TnImage').live('click', function() { 
    $('.selected').fadeOut(500, function(){ 
     $(this).removeClass('selected'); 
    }); 
    $('#'+$(this).attr('imgidref')).delay(250).fadeIn('slow').addClass('selected'); 
});

我知道這是一個粗略的例子，但它應該涵蓋基本原則。

來源

2011-04-14 14:34:10

感謝您的回覆，我想嘗試和避免在頁面上有多個隱藏的div，實際上我只是想與圖像的主div並交換內容，最多2個div，我可以在下面的一個加載newimage ，然後淡出頂部div，將頂部div源代碼更改爲新圖像，並將其淡入以準備用於下一個縮略圖點擊 – 2011-04-14 14:43:32

改進此代碼的幾種方法：緩存您想要多次使用的任何jQuery對象;在'setTimeout'回調中鏈接函數調用;不要使用'setTimeout'，而是使用'.delay（）'。 – 2011-04-14 14:44:13

感謝您的改進，馬特！ :) – 2011-04-14 14:49:44

如果我明白這個問題（除了你想避免插件:) jQuery Cycle應該做你想要的。使用fade transition加上pager option。

http://jsfiddle.net/mattball/xM3cC/

來源

2011-04-14 14:24:12

由於一直沒有一個答案約淡入淡出無需插件，這裏是我想出瞭解決方案：

<!DOCTYPE html> 
<html> 
<head> 

<script type="application/javascript" src="jquery-1.9.1.js"></script> 
<script type="application/javascript" src="jquery-ui-1.10.2.custom.min.js"></script> 

<link type="text/css" rel="stylesheet" href="jquery-ui-1.10.2.custom.min.css" /> 

<title></title> 

<script> 
var list = new Array(); 
var increment = 0; 

$(function(){ 
$.when(
    $("#image_preload img").each(function(i, e){ 
     image = $(this).attr('src'); 
     list.push(image); 
    }) 
).then(function(){ 
    rotate() 
}); 
}); 

function rotate(){ 
$("#deactive").fadeOut(1000, function(){ 
}); 

$("#active").attr('src', list[increment]); 

setTimeout(function(){ 
    increment++; 

    if(increment == list.length){ 
     increment = 0; 
    } 

    $("#deactive").attr('src', list[increment]); 

    $("#deactive").fadeIn(1000, function(){ 
     rotate(); 
    }); 
}, 5000); 
} 
</script> 

<style> 
html, body { 
margin: 0px; 
padding: 0px; 
} 

#display { 
margin: 0px auto; 
position: relative; 
text-align: center; 
width: 220; 
} 

#display img { 
left: 0px; 
margin: 0px auto; 
position: absolute; 
top: 0px; 
} 

#image_preload { 
display: none; 
} 
</style> 

</head> 
<body> 

<div id="display"> 
<img src="" width="200" height="200" alt="" id="active" /> 
<img src="" width="200" height="200" alt="" id="deactive" /> 
</div> 

<div id="image_preload"> 
<img src="1.png" width="200" height="200" alt="" /> 
<img src="2.jpg" width="200" height="200" alt="" /> 
<img src="3.png" width="200" height="200" alt="" /> 
<img src="4.jpg" width="200" height="200" alt="" /> 
<img src="5.jpg" width="200" height="200" alt="" /> 
</div> 

</body> 
</html>

可能不是世界上最好的，但其實很簡單，它的工作原理。

這裏是JS小提琴示例http://jsfiddle.net/DYYCy/

來源

2013-08-08 18:28:48

這實際上回答了這個問題。不知道爲什麼它沒有收到投票或被標記爲答案。這是我會從這裏獲得的東西。 – Err 2014-04-30 21:48:12

沒有插件的Jquery交叉淡入淡出

回答

相關問題