다음 스크립트는 페이드 아웃 한 후 다음 배너 세트에서 페이드 인하도록 설정되어 있습니다. 나는 이것을 crossfade로 수정하여 다음 배너 세트가 기존 배너 위에 페이드 인 한 다음 사라지도록 수정하는 방법을 찾고 싶습니다. 훨씬 더 깨끗해 보일 것입니다.
나는 crossfade를위한 많은 스크립트를 보았다; 그러나이 스크립트는 "하위"요소를 페이드하기 때문에이 작업을 수행하도록 수정하는 방법을 잘 모릅니다.
이 작업을 수행하는 더 좋은 방법이 있으면 알려주세요.
$(function () {
/* SET PARAMETERS */
var change_img_time = 9000;
var transition_speed = 1000;
var simple_slideshow = $("#graphic_1"),
listItems = simple_slideshow.children('.banner'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(transition_speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
});
html / php (데이터가 어떻게 보이는지 볼 수 있도록)
$rotban1 = $db1->query("SELECT background_image, background_image_alt, foreground_image, foreground_image_alt, text FROM banner") or die ('Unable to execute query. '. mysqli_error($db1con));
$slidecount == 0;
if ($rotban1->num_rows > 0) {
while ($slide = $rotban1->fetch_assoc()) {
echo '<div class="banner">';
echo '<img class="background_image" alt="'. $slide['background_image_alt'] .'" src="'. $slide['background_image'] .'">';
echo '<img class="foreground_image" alt="'. $slide['foreground_image_alt'] .'" src="'. $slide['foreground_image'] .'">';
if (!empty( $slide['text'])) { echo '<h1>'. $text .'</h1>'; }
echo '</div>';
}
}
완료 fadeIn후 전화 fadeOut합니다.
콜백 함수를 사용하지 않으려면 둘 다 동시에 호출 해보십시오.
changeList = function () {
listItems.eq(i).fadeOut(transition_speed);
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
};
이 방법, fadeOut그리고 fadeIn애니메이션이 동시에 시작 (밀리 초를 무시)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다