javascript - 在网站中实现预制旋转横幅

Question

我正在尝试实现在此处找到的旋转 jQuery 横幅: http://visitmix.com/labs/glimmer/samples/sequence.html

到我的网站。所有代码都已列出，您可能会认为这是白痴证明，但我并没有牢牢掌握如何将语言相互联系起来。

我现在非常擅长 PHP、CSS 和 HTML，但我和 javaSCRIPT 似乎不太合得来。

我将 HTML 复制到文件中适当的位置，复制 CSS，并将函数复制到我的 js/scripts.js 文件中。

这是我的 scripts.js 文件的样子:

var site = function() {
    this.navLi = $('#nav li').children('ul').hide().end();
    this.init();
};

site.prototype = {

    init : function() {
        this.setMenu();
    },

    // Enables the slidedown menu, and adds support for IE6

    setMenu : function() {

    $.each(this.navLi, function() {
        if ( $(this).children('ul')[0] ) {
            $(this)
                .append('<span />')
                .children('span')
                    .addClass('hasChildren')
        }
    });

        this.navLi.hover(function() {
            // mouseover
            $(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
        }, function() {
            // mouseout
            $(this).find('> ul').stop(true, true).hide();       
        });

    }

}


new site();

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(eval("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(eval("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(eval("button1_click"),"3000");
$("#image3").animate({"opacity":1},300, "linear", null);
}

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

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

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

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

OnLoad();

});

我以为我已经通过编写将我的 scripts.js 文件连接到我的 HTML 文件

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/scripts.js"></script>

但是当页面加载时，按钮似乎并没有在三个图像之间旋转。

有人可以发现我的错误，或者告诉我该怎么做吗？

编辑:这是与横幅相关的部分的 CSS 代码:

/* ROTATING BANNER CSS */

.slideshow {
position:relative;
padding:0;
margin-left: 12.5%;
margin-right: 12.5%;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
width: 1000px;
height: 250px;
}
.slideshow a img {
border:none;
}
.slideshow li.slide {
list-style-type:none;
}
.slideshow .slides {
height:260px;
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:10;
left:0px;
bottom:20px;
margin:0;
}
.slideshow .buttons li {
float:left;
display:inline;
width:30px;
height:30px;
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;
}

这是我的 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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,300italic' rel='stylesheet' type='text/css'>
<title>filler.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/scripts.js"></script>

</head>

<body style="background-image: url('images/bg.jpg')">
    <br />
    <div class="slideshow">
    <ul class="buttons">
    <li class="active" id="button1"><a href="#" title="warframebuilds">1</a></li>
    <li id="button2"><a href="#" title="create build">2</a></li>
    <li id="button3"><a href="#" title="forums">3</a></li>

    </ul>
    <ul class="slides">
    <li style="visibility:visible" class="slide" id="image1">
    <a href="http://www.filler.com/"><img alt="warframebuilds" src="images/bannerimg1.png" /></a></li>
    <li class="slide" id="image2">
    <a href="http://www.filler.com/create.php"><img alt="create build" src="images/bannerimg2.png" /></a></li>
    <li class="slide" id="image3">
    <a href="http://www.filler.com/forums"><img alt="forums" src="images/bannerimg3.png" /></a></li>

    </ul>
    </div>

非常感谢!

Answer 1

你可能需要交换两行:

jQuery(function($) {  // short for jQuery(document).ready(function ($) { 

    new site();

    var timer;
    // ...

在您的代码中，new site() 在 ready 事件之外。因此，如果您的代码位于 HTML 的开头，则这些元素(尚未)准备就绪，因此您的代码无法运行。

关于使用 setTimeout 的注意事项:您的示例源代码做了一些丑陋的事情，使用了不需要的 eval 和隐式字符串到数字的转换。就这样

timer = setTimeout(button2_click, 3000);