이 슬라이드 쇼를 수정하려고합니다 : http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
내 스크립트는 다음과 같습니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
var count = 1
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
if (count == 1)
{
count++
}
else
{
.animate({top: '-100px'}, 1000)
count++
}
if (count==3)
{
count=1
}
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
그래서 다른 모든 슬라이드 쇼 개체 (div)를 애니메이션 방법으로 사용하려고하지만 먼저 시도하고 있습니다.
모든 개수와 if 변수 및 문을 제거하면 (그러나 애니메이션은 그대로두면) 모든 div가 애니메이션되도록 작동합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.animate({top: '-100px'}, 1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
중요한 경우이 스크립트는 cmsms- 페이지에 포함되어 있습니다.
이것은 아마도 많은 것을 설명하는 첫 번째 자바 스크립트입니다 ...
다음은 빠른 해결책입니다.
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
var
count = 1;
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000, function () {
if(count != 1)
$(this).css('top', '10px');
count++;
})
.next()
.fadeIn(1000, function() {
if(count != 1)
$(this).animate({top: '-100px'}, 1000);
if(count == 3)
count = 0;
})
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다