在導航幻燈片中的圖像之間淡入淡出

所以，我只是想在幻燈片中的圖像之間有一個很好的淡入淡出。在導航幻燈片中的圖像之間淡入淡出

我正在尋找一個簡單的JavaScript或jquery函數來堅持到頭。我沒有自動播放功能，所以這只是在.onclick命令上的每個圖像之間淡入淡出。

任何幫助？

<html> 
<head> 
<script> 
var imageGallery = [ 
"images/swanson-020.jpg" , 
"images/swanson-019.jpg" , 
"images/swanson-018.jpg" , 
"images/swanson-017.jpg" , 
"images/swanson-016.jpg" , 
"images/swanson-015.jpg" , 
"images/swanson-014.jpg" , 
"images/swanson-013.jpg" , 
"images/swanson-012.jpg" , 
"images/swanson-011.jpg" , 
"images/swanson-010.jpg" , 
"images/swanson-009.jpg" , 
"images/swanson-008.jpg" , 
"images/swanson-007.jpg" , 
"images/swanson-006.jpg" , 
"images/swanson-005.jpg" ,  
"images/swanson-004.jpg" , 
"images/swanson-003.jpg" , 
"images/swanson-002.jpg" , 
"images/swanson-001.jpg" 
]; 
var imgCount = 0; 
var totalImgs = imageGallery.length - 1; 

function next() { 
imgCount++; 
if(imgCount > totalImgs) imgCount = 0 
document.getElementById("slideshow").src = imageGallery[imgCount] ; 
} 

function previous() { 
imgCount--; 
if(imgCount < 0) imgCount = totalImgs ; 
document.getElementById("slideshow").src = imageGallery[imgCount] ;  
} 
</script> 
</head> 
<body> 
<section> 
<img id="slideshow" src="images/swanson-029.jpg"> 
<p class="centeredparagraph"><a href="#" onclick="previous(); return false;">Back</a>&nbsp;/&nbsp;<a href="#" onclick="next(); return false;">Next</a></p><br> 
</body> 
</section> 
</html>

來源

2016-02-18 Josiah Swanson

你可以嘗試利用jQuery的「淡入」和「淡出」功能 –

任何人都知道一個良好的預載系統？ –

這裏有一個快速和骯髒的香草JS嘗試：https://jsfiddle.net/jmarikle/o1rkmxx0/

它確實有一些問題，但。您應該爲這些圖像使用預加載器。加載滯後將導致不良影響。

... 

    var t = 0; 

    function next() { 
    if (t) return; 
    imgCount++; 
    if (imgCount > totalImgs) imgCount = 0 
    document.getElementById("slideshow").src = imageGallery[imgCount]; 
    } 

    function previous() { 
    if (t) return; 
    imgCount--; 
    if (imgCount < 0) imgCount = totalImgs; 
    document.getElementById("slideshow").src = imageGallery[imgCount]; 
    } 

... 

document.getElementById("slideshow").onload = function(){ 
    var obj = this; 
    var nextSibling = obj.nextSibling; 
    while(nextSibling && nextSibling.nodeType != 1) { 
     nextSibling = nextSibling.nextSibling 
    } 
    nextSibling.className = 'fade'; 
    t = setTimeout(function(){ 
    nextSibling.className = ''; 
    nextSibling.src = obj.src; 
    t = 0; 
    }, 1000); 
}

來源

2016-02-18 21:02:26

你是這個意思嗎？

var imgGal = [ $('#slideshow').attr('src') ]; \t // \t adds first image from page 
 
// simple loop to add the rest of the images 
 
for (var i=20;i>0;i--) imgGal.push('http://josiahswanson.com/images/swanson-0'+(i<10?'0'+i:i)+'.jpg'); 
 

 
// \t preLoad images for cacheing for faster load on call 
 
// notice how they are purposly positioned completely out of view. 
 
// this alows the browser to go ahead and load the images but maintain the view you want for the user experience 
 
for (var x in imgGal) $('<img />', { src: imgGal[x], style: 'position:fixed;height:1px;width:1px;bottom:200%;right:200%;' }).appendTo($('body')) 
 

 
$(document).on('click', '#btnPrev, #btnNext', function(e) { 
 
\t var $this = this, 
 
     srcCur = $('#slideshow').attr('src'), // simply get currentimg source 
 
\t \t iNext = imgGal.indexOf(srcCur)+1, // determine next image index 
 
\t \t iPrev = imgGal.indexOf(srcCur)-1, // determine previous image index 
 
\t \t srcNext = iNext<imgGal.length?imgGal[iNext]:imgGal[0], // determine next image source to use 
 
\t \t srcPrev = iPrev>-1?imgGal[iPrev]:imgGal[imgGal.length-1]; // determine previous image source to use 
 
    // finally, based on which is clicked, 
 
    // load the fade out the current img tag then load in the new source 
 
    $('#slideshow').fadeOut(function() { $(this).attr('src', $this.id.match(/prev/i) ? srcPrev : srcNext) }); 
 
}); 
 

 
// here's the key helper 
 
// this tells the img tag to fade in everytime an image is loaded into it 
 
$('#slideshow').load(function(e) { $(this).fadeIn(); })

html { 
 
    background-color: #FFFFFF; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    margin: 0 auto 0; 
 
    padding: 5%; 
 
    max-width: 900px; 
 
} 
 

 
nav { 
 
    margin: 10px 0; 
 
    padding: 0; 
 
    text-align: left; 
 
    width: 100%; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    margin: 0 20px 0 0; 
 
    padding: 0; 
 
} 
 

 
div.sidebar { 
 
    float: inherit; 
 
    width: 100%; 
 
} 
 

 
div.page { 
 
    float: inherit; 
 
    width: 100%; 
 
} 
 

 
section { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
a { 
 
    color: #33CCFF; 
 
    font-family: 'Georgia', serif; 
 
    font-size: 13px; 
 
    font-style: italic; 
 
    font-weight: 400; 
 
    line-height: 28px; 
 
    margin: 10px 0; 
 
    padding: 2px; 
 
    text-decoration: underline; 
 
    width: 100%; 
 
} 
 

 
a:hover { 
 
    color: #0066CC; 
 
} 
 

 
img { 
 
    margin: 0; 
 
    max-width: 100%; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
} 
 

 
p { 
 
    color: #000000; 
 
    font-family: 'Georgia', serif; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    line-height: 28px; 
 
    margin: 10px 0; 
 
    padding: 0 8%; 
 
    width: 84%; 
 
} 
 

 
p.header { 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
u { 
 
    color: #FF6633; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
} 
 

 
.centeredparagraph { 
 
    text-align: center; 
 
} 
 

 
.footerparagraph { 
 
    margin: 0; 
 
    padding: 10px 0; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.italic { 
 
    font-style: italic; 
 
} 
 

 
.selectedlink { 
 
    color: #0066CC; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img id="slideshow" src="http://josiahswanson.com/images/swanson-029.jpg"> 
 
<p class="centeredparagraph"> 
 
    <a id="btnPrev" href="javascript:void 0">Back</a>&nbsp;/&nbsp;<a id="btnNext" href="javascript:void 0">Next</a> 
 
</p> 
 
<br />

來源

2016-02-18 21:05:16 SpYk3HH

快速jQuery的解決方案：

$(document).ready(function(){ 
 
    var imageGallery = [ 
 
    "http://josiahswanson.com/images/swanson-020.jpg", 
 
    "http://josiahswanson.com/images/swanson-019.jpg", 
 
    "http://josiahswanson.com/images/swanson-018.jpg", 
 
    "http://josiahswanson.com/images/swanson-017.jpg", 
 
    "http://josiahswanson.com/images/swanson-016.jpg", 
 
    "http://josiahswanson.com/images/swanson-015.jpg", 
 
    "http://josiahswanson.com/images/swanson-014.jpg", 
 
    "http://josiahswanson.com/images/swanson-013.jpg", 
 
    "http://josiahswanson.com/images/swanson-012.jpg", 
 
    "http://josiahswanson.com/images/swanson-011.jpg", 
 
    "http://josiahswanson.com/images/swanson-010.jpg", 
 
    "http://josiahswanson.com/images/swanson-009.jpg", 
 
    "http://josiahswanson.com/images/swanson-008.jpg", 
 
    "http://josiahswanson.com/images/swanson-007.jpg", 
 
    "http://josiahswanson.com/images/swanson-006.jpg", 
 
    "http://josiahswanson.com/images/swanson-005.jpg", 
 
    "http://josiahswanson.com/images/swanson-004.jpg", 
 
    "http://josiahswanson.com/images/swanson-003.jpg", 
 
    "http://josiahswanson.com/images/swanson-002.jpg", 
 
    "http://josiahswanson.com/images/swanson-001.jpg" 
 
    ]; 
 
    
 
    var currentImg = 0; 
 
    var totalImgs = imageGallery.length - 1; 
 

 
    $("a").click(function(e) { 
 
    e.preventDefault(); 
 
    if($(this).is('.next')) { 
 
     currentImg++; 
 
     if (currentImg > totalImgs) currentImg = 0 
 
    } 
 
    else { 
 
     currentImg--; 
 
     if (currentImg < 0) currentImg = totalImgs; 
 
    } 
 
    showImg(imageGallery[currentImg]); 
 
    }); 
 
    
 
    function showImg(img) { 
 
    var $img = $("#slideshow"); 
 
    $img.fadeOut(400, function() { 
 
    \t $img.attr('src',img).load(function(){ 
 
     \t $img.fadeIn(400); 
 
     }); 
 
    }); 
 
    } 
 

 
});

section { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
a { 
 
    color: #33CCFF; 
 
    font-family: 'Georgia', serif; 
 
    font-size: 13px; 
 
    font-style: italic; 
 
    font-weight: 400; 
 
    line-height: 28px; 
 
    margin: 10px 0; 
 
    padding: 2px; 
 
    text-decoration: underline; 
 
    width: 100%; 
 
} 
 

 
a:hover { 
 
    color: #0066CC; 
 
} 
 

 
img { 
 
    margin: 0; 
 
    max-width: 100%; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
} 
 

 
p { 
 
    color: #000000; 
 
    font-family: 'Georgia', serif; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    line-height: 28px; 
 
    margin: 10px 0; 
 
    padding: 0 8%; 
 
    width: 84%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section> 
 
    <img id="slideshow" src="http://josiahswanson.com/images/swanson-029.jpg"> 
 
    <p class="centeredparagraph"><a class="prev" href="#">Back</a>&nbsp;/&nbsp;<a href="#" class="next">Next</a></p> 
 
</section>

來源

2016-02-18 21:10:18 smdsgn

在導航幻燈片中的圖像之間淡入淡出

回答

相關問題