سؤال
كيف يمكنني التدوير بين صورتين باستخدام jQuery؟ قل على سبيل المثال.
<img src="image01.jpg" />
<img src="image02.jpg" />
أنا أحب الصور لتتلاشى داخل/الخروج بين لقول 2 Seconds لكل منهما.
شكرًا! مقدر جدا. قون
المحلول
مثال بسيط لقد طرقت.
<div id="imageSwap">
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
setImageOne();
});
function setImageOne() {
$('#imageSwap').fadeIn(500).html('<img src="image01.jpg" />').delay(2000).fadeOut(500, function () { setImageTwo(); });
}
function setImageTwo() {
$('#imageSwap').fadeIn(500).html('<img src="image02.jpg" />').delay(2000).fadeOut(500, function () { setImageOne(); });
}
</script>
نصائح أخرى
أعد كتابة HTML الخاص بك إلى
<div>
<img class="current slide" src="image01.jpg" style="position:absolute;"/>
<img class="slide" src="image02.jpg" style="position:absolute;display:none"/>
<img class="slide" src="image03.jpg" style="position:absolute;display:none"/>
<img class="dummy" src="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);
}
وفي قاعدتك JavaScript ، أضف
var slidespeed = 2000;
var slidetimer = null;
jQuery(document).ready(function() {
nextSlide()
});
لم أختبر هذا تمامًا مثل هذا ، لذلك قد تكون هناك مطبعية مطبعية. يضمن Div المحيط أن تكون جميع صور الشرائح موجودة على الفور حيث يقع Div ، بسبب موقفها: مطلق. الصورة الوهمية غير مرئية ، ولكنها تملأ المساحة اللازمة لجعل div المحيطة يلف فعليًا حول جميع الصور. قد لا تحتاج إلى هذا.
يجب أن تحتوي صورك على أحجام مماثلة ، أو على الأقل يجب أن تكون الدمية كبيرة مثل أكبر صورة.
$ 2c ، *-pike
كنت أبحث عن وسيلة لتتلاشى بين صور كاميرا الويب دون أن أمضي تلك اللحظة بين الصور المعروضة. ما أقوم به هو ضبط الصورة الجديدة كصورة خلفية ، وتلاشى الصورة المرفقة ، وتنزع صورة الخلفية كصورة مغلقة ، ثم جعل الصورة المرفقة مرئية مرة أخرى.
يمكنك أن تفعل شيئا
خطرت لي هذه.
<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="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>
يمكنك أن تفعل ذلك بدون jQuery. فقط مع CSS: وتلاشي بارد بين الصورة
.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="https://image.freepik.com/free-vector/software-logo_1103-316.jpg">
<img src='https://image.freepik.com/free-vector/m-letter-logo-template_1061-150.jpg'>
</div>
سيطرة أفضل على التوقيت باستخدام .animate و .css بدلاً من ذلك
هذا سيخلق بكرة crossfade لينة.
في كل دورة ، ينقل الصورة غير المرئية في المقدمة من بدء رسوم الرسوم المتحركة إلى 100. بمجرد الانتهاء من ذلك ، يتم ضبط الصورة المرئية السابقة على عتامة 0 وانتقل إلى الأمام ، إلخ.
<div>
<div id="imageSwapA" style="display:block; z-index:100; opacity:0;">
<img src="imagea.png"/>
</div>
<div id="imageSwapB" style="display:block; z-index:101; opacity:0;">
<img src="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>