Question

旋转的横幅不会旋转。我不确定我在下面的代码中做错了什么。基本上，我从旧的javascript升级了jQuery中旋转横幅的功能。有五个横幅，每个横幅都需要根据TimeOut功能进行旋转。

HTML：

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Rotating Banners in jQuery</title>
    <link href="rotStyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="rotScript.js"></script>
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<div class="slideshow">
    <ul class="slides">
        <li style="visibility:visible" class="slide" id="image1"><a href="#"><img alt="AT&T" src="banner.att.en.jpg" /></a></li>
        <li class="slide" id="image2"><a href="#"><img alt="US Cellular" src="banner.uscellular.user.en.jpg" /></a></li>
        <li class="slide" id="image3"><a href="#"><img alt="Verizon" src="banner.verizon.en.jpg" /></a></li>
        <li class="slide" id="image4"><a href="#"><img alt="Wi-Fi" src="banner.wifi.en.jpg" /></a></li>
        <li class="slide" id="image5"><a href="#"><img alt="Wi-Fi" src="banner.wifi2.en.jpg" /></a></li>
    </ul>
</div>
</body>
</html>

CSS：

font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}

/* begin: slideshow */
.slideshow {
position:relative;
padding:0;
margin:0;
}
.slideshow a img {
border:none;
}
.slideshow li.slide {
list-style-type:none;
}
.slideshow .slides {
height:230px;
margin:0;
}
.slideshow .slides li.slide {
visibility:hidden;
position:absolute;
left:0px;
top:0;
}
.slideshow .buttons {
display:none;
}
.slideshow .buttons {
display:block;
position:absolute;
z-index:100;
left:0px;
bottom:20px;
margin:0;
}
.slideshow .buttons li {
float:left;
display:inline;
width:24px;
height:24px;
margin:0;
padding-left:11px;
line-height:30px;
background-image:url('buttonBg.png');
background-repeat:no-repeat;
}
.slideshow .buttons li a {
float:left;
text-decoration:none;
width:30px;
height:30px;
color:#fff;
outline:0;
}
.slideshow ul.buttons li a:hover {
text-decoration:none;
color:#0a0a0a;
}
.slideshow ul.buttons li.active a:hover,
.slideshow ul.buttons li.active a {
color:#666666;
}
/* end: slideshow */

jQuery的：

jQuery(function($) {
var timer;
function button1_click(event)
{
$(".slide").css("visibility","hidden");
$("#image1").css("visibility","visible");
$("#image1").css("opacity","0");
$("#image1").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image1").animate({"opacity":1},300, "linear", null);
$("#button1").addClass("active");
clearTimeout(timer);
timer = setTimeout(button2_click, 3000);
$("#image1").animate({"opacity":1},300, "linear", null);
}

function button2_click(event)
{
$(".slide").css("visibility","hidden");
$("#image2").css("visibility","visible");
$("#image2").css("opacity","0");
$("#image2").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image2").animate({"opacity":1},300, "linear", null);
$("#button2").addClass("active");
clearTimeout(timer);
timer = setTimeout(button3_click, 3000);
$("#image2").animate({"opacity":1},300, "linear", null);
}

function button3_click(event)
{
$(".slide").css("visibility","hidden");
$("#image3").css("visibility","visible");
$("#image3").css("opacity","0");
$("#image3").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image3").animate({"opacity":1},300, "linear", null);
$("#button3").addClass("active");
clearTimeout(timer);
timer = setTimeout(button4_click, 3000);
$("#image3").animate({"opacity":1},300, "linear", null);
}

function button4_click(event)
{
$(".slide").css("visibility","hidden");
$("#image4").css("visibility","visible");
$("#image4").css("opacity","0");
$("#image4").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image4").animate({"opacity":1},300, "linear", null);
$("#button4").addClass("active");
clearTimeout(timer);
timer = setTimeout(button5_click, 3000);
$("#image4").animate({"opacity":1},300, "linear", null);
}


function button5_click(event)
{
$(".slide").css("visibility","hidden");
$("#image5").css("visibility","visible");
$("#image5").css("opacity","0");
$("#image5").animate({"opacity":1},300, "linear", null);
$("ul.buttons li").removeClass("active");
$("#image5").animate({"opacity":1},300, "linear", null);
$("#button5").addClass("active");
clearTimeout(timer);
timer = setTimeout(button1_click, 3000);
$("#image5").animate({"opacity":1},300, "linear", null);
}

function OnLoad(event)
{
clearTimeout(timer);
timer = setTimeout(button2_click, 3000);
}

$('#button1').bind('click', button1_click);

$('#button2').bind('click', button2_click);

$('#button3').bind('click', button3_click);

OnLoad();

});

Answer 1

这里的问题是您在加载jQuery之前加载脚本。您需要先加载jQuery，然后加载脚本。

具有TimeOut功能的旋转横幅不起作用？

1 个答案: