我正在尝试修改此幻灯片: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>
因此,我尝试让所有其他幻灯片对象(divs)都使用动画方法,但首先要使用animate方法。
如果我删除所有这些计数,并且删除变量和语句(但将动画保留在原处),则它将起作用,从而使每个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页中。
这是我的第一个javascript,也许可以解释很多...
这是一个快速的解决方案:
<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] 删除。
我来说两句