我开始为一个项目构建一个推荐旋转器。奇怪的是,它在它上线之前就坏了(之前测试过),我决定废弃它并编写一个新脚本来执行相同的任务。我对 jQuery 比较陌生,而且我对使用三元运算符不是最熟悉的,但我想试一试。
下面的代码是我正在使用的。我相信这段代码应该正确执行,但是如果你将它的全部复制到一个新的 .html 文档中,你会发现它没有。
我正在寻找我能得到的任何帮助。我一直在努力成长为一名开发人员——我不是一个盲目地复制和粘贴以获得结果的人。我想知道发生了什么:)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Rotator Testing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
#testimonials{
width:300px;
height:100px;
background:#666;
position:absolute;
top:0;left:0;
}
.testimonial{
color:#CCC;
display:block;
width:200px;
height:30px;
background:#333;
position:absolute;
left:0;top:0;
z-index:5;
}
.show{
z-index:10;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.testimonial').css({opacity: 0.0});
$('.testimonial:first').css({opacity:1.0});
setInterval(function(){
var current = ( $('#testimonials .testimonial.show')? $('#testimonials .testimonial.show') : $('#testimonials .testimonial:first'));
var next = current.next().length ? $('#testimonials .testimonial:first') : current.next();
//Set the fade in effect for the next testimonial, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current testimonial
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
},2000);
});
</script>
</head>
<body>
<div id="testimonials">
<article class="testimonial">Testimonial 1</article>
<article class="testimonial">Testimonial 2</article>
<article class="testimonial">Testimonial 3</article>
<article class="testimonial">Testimonial 4</article>
</div>
</body>
</html>