http://on-ze.com/demo/jquery-fade-slideshow/
このサイトなんですけど、サンプルコードを入力してもこのようにはならなかったです。
このサイトでは分割させてソースコードを表示させてあるんですが、どのように組み立てればいいのでしょうか
http://on-ze.com/archives/1388
どなかたご教授お願いします。
ちなみに私が組み立てたソースコードは
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<head>
<script src="/js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script>
$(function(){
// 設定
var $width =640; // 横幅
var $height =300; // 高さ
var $interval = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
$("#slide ul li:first").addClass("active").show();
setInterval(function(){
var $active = $("#slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});
</script>
<div id="slide">
<ul>
<li><a href=""><img src=http://terra.sgu.ac.jp/geo_essay/2006/22Nossappu/22_4.JPG alt="" width="640" height="300" /></a></li>
<li><a href=""><img src=http://hakusan-geo.main.jp/areaintro/img/photo/site01_1-3.jpg alt="" width="640" height="300" /></a></li>
<li><a href=""><img src=http://blogs.c.yimg.jp/res/blog-e6-db/ho2730047/folder/141775/83/29738583/img_1?1234184103 alt=""width="640" height="300" /></a></li>
</ul>
</div>
</body>
</html>
です。
縦に3枚上から順番に表示させられてしまいます。
どなたかご教授お願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。