ここにあるローテーション 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>
しかし、ページが読み込まれると、ボタンは 3 つの画像間で回転していないように見えます。
誰かが私のエラーを見つけたり、これを行う方法を教えてくれますか?
編集: バナーに関連する部分の 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>
本当にありがとう！