छवियों के बीच लुप्तप्राय - jquery, fadein, fadeout

मैं jQuery का उपयोग कर दो छवियों के बीच घुमाव कैसे फीका कर सकते हैं? उदाहरण के लिए कहो।

<img src="/images/image01.jpg" />
<img src="/images/image02.jpg" />

मैं छवियों को प्रत्येक 2 सेकंड के लिए कहने के लिए अंदर / बाहर फीका पसंद है।

धन्यवाद! बहुत सराहना की। :)

उत्तर:

उत्तर № 1 के लिए 6

एक साधारण उदाहरण मैंने खटखटाया।

<div id="imageSwap">
</div>


<script language="javascript" type="text/javascript">

$(document).ready(function () {
setImageOne();
});

function setImageOne() {
$("#imageSwap").fadeIn(500).html("<img src="/images/image01.jpg" />").delay(2000).fadeOut(500, function () { setImageTwo(); });
}

function setImageTwo() {
$("#imageSwap").fadeIn(500).html("<img src="/images/image02.jpg" />").delay(2000).fadeOut(500, function () { setImageOne(); });
}

</script>

जवाब के लिए 2 № 2

अपने एचटीएमएल को फिर से लिखें

<div>
<img class="current slide" src="/images/image01.jpg" style="position:absolute;"/>
<img class="slide" src="/images/image02.jpg" style="position:absolute;display:none"/>
<img class="slide" src="/images/image03.jpg" style="position:absolute;display:none"/>
<img class="dummy" src="/images/image01.jpg" style="visibility:none;"/>
</div>

मैंने स्पष्टता के लिए एक तीसरी छवि जोड़ा। जैसे एक jquery समारोह जोड़ें

function nextSlide() {
jQuery(".slide.current").each(function() {
var next = jQuery(this).next(".slide");
if (!next.size()) next = jQuery(this).siblings(".slide").eq(0);
jQuery(this).fadeOut().removeClass("current");
next.fadeIn().addClass("current");
});
slidetimer=setTimeout("nextSlide()",slidespeed);
}

और अपने मूल जावास्क्रिप्ट में, जोड़ें

var slidespeed = 2000;
var slidetimer = null;
jQuery(document).ready(function() {
nextSlide()
});

मैंने इस तरह बिल्कुल परीक्षण नहीं किया, तो टाइफूनवहां हो सकता है आसपास के div यह सुनिश्चित करता है कि सभी स्लाइड छवियां उस स्थान पर स्थित हों जहां div स्थित है, उनकी स्थिति के कारण: पूर्ण। डमी छवि दिखाई नहीं दे रही है, लेकिन आस-पास के div को वास्तव में सभी छवियों के चारों ओर लपेटने के लिए आवश्यक स्थान भरता है। आपको इसकी आवश्यकता नहीं हो सकती है।

आपकी छवियों में समान आकार होना चाहिए, या कम से कम डमी को सबसे बड़ी छवि के रूप में बड़ा होना चाहिए।

$ 2 सी, * -pike


जवाब के लिए 0 № 3

मैं वेबकैम के बीच फीका करने का एक तरीका ढूंढ रहा थाप्रदर्शित छवियों के बीच उस पल के बिना छवियों। मैं जो कर रहा हूं वह नई छवि को पृष्ठभूमि छवि के रूप में सेट कर रहा है, संलग्न छवि को लुप्त कर रहा है, पृष्ठभूमि छवि को संलग्न छवि के रूप में सेट कर रहा है, फिर संलग्न छवि को फिर से दिखाई दे रहा है।

आप कुछ कर सकते हैं

मैं इसके साथ आया था।

<style type="text/css">
#webcamImageDiv {
text-align: center;
background-image: url("webcam.jpg");
background-position: top center;
background-repeat: no-repeat;
}
</style>

<div id="webcamImageDiv">
<img id="webcamImageImg" src="/images/webcam.jpg" alt="Image Not Available" />
</div>

<script type="text/javascript">

var refreshMillis = 10000;

function refreshWebcam() {

// set the div to the height of the image
$("#webcamImageDiv").height( $("#webcamImageImg").height() );

// get the path to the new image
// (in your case, your other image)
var newImg = "webcam.jpg?t=" + new Date().getTime();

// set the background of the div
$("#webcamImageDiv").css("background-image","url("" + newImg + "")");

// fade out the image
$("#webcamImageImg").fadeOut(500, function() {

// update the img tag, show the image
$("#webcamImageImg").removeAttr("src").attr("src", newImg).show();

// do it again
window.setTimeout(getWebcam, refreshMillis);
});
}

$(document).ready( function() {
window.setTimeout(refreshWebcam, refreshMillis);
});
</script>

जवाब के लिए 0 № 4

आप बिना jquery के कर सकते हैं। केवल सीएसएस के साथ: और छवि के बीच ठंडा फीका

.fade img {
transition: all .8s;
max-width: 200px;
}
.fade:hover img:nth-child(2) {
opacity: 0;
}
.fade img:first-child {
position: absolute;
z-index: -1;
}
<div class="fade">
<img src="/images/https://image.freepik.com/free-vector/software-logo_1103-316.jpg">
<img src="/images/https://image.freepik.com/free-vector/m-letter-logo-template_1061-150.jpg">
</div>


उत्तर के लिए -1 № 5

इसके बजाय .animate और .css का उपयोग करके समय का बेहतर नियंत्रण

यह एक नरम क्रॉसफ़ेड एक रील बना देगा।

प्रत्येक चक्र में, यह अदृश्य छवि को एनीमेशन अस्पष्टता 100 से शुरू करने के सामने ले जाता है। एक बार पिछली दृश्य छवि को तब किया जाता है, फिर अस्पष्टता 0 पर सेट किया जाता है और आगे बढ़ता है।

<div>
<div id="imageSwapA"  style="display:block; z-index:100; opacity:0;">
<img src="/images/imagea.png"/>
</div>
<div id="imageSwapB" style="display:block; z-index:101; opacity:0;">
<img src="/images/imagea.png"/>
</div>
</div>

<script>
$(document).ready(function () {

setRollOne(); // <- animation can be triggered

function setRollOne() {
$("#imageSwapA").css({"z-index":101}).animate({"opacity":1}, 3500, function(){
$("#imageSwapB").css({"opacity":0});
$("#imageSwapA").css({"z-index":100});
setTimeout(function(){ setRollTwo(); }, 1500);
});
}
function setRollTwo() {
$("#imageSwapB").css({"z-index":101}).animate({"opacity":1}, 3500, function(){
$("#imageSwapA").css({"opacity":0});
$("#imageSwapB").css({"z-index":100});
setTimeout(function(){ setRollOne(); }, 1500);
});
}
});
</script>

संबंधित सवाल
सबसे लोकप्रिय