リンク付きスライドショーの不具合について
先日、ホームページを制作しました。そこにスライドショーを「A Simple jQuery Slideshow」といjavascriptを使って作ったあと、ソースの編集をして画像一つ一つにURLを貼り付けました。
しかし、なぜかスライドショーの最初が何も表示されない状態になってしまったのです。少し待つと、スライドショーが始まるのですが・・・
なんか不自然なので、急いで改善したいです。どうかご協力お願いします！
つくったホームページ→http://www.geocities.jp/raisutei/
A Simple jQuery Slideshow→http://jonraasch.com/blog/a-simple-jquery-slideshow
ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<link rel="shortcut icon" href="./favicon.ico"><title>らいす亭</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/*** Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow a.active');
if ( $active.length == 0 ) $active = $('#slideshow a:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow a:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:350px;
}
#slideshow a {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow a.active {
z-index:10;
opacity:1.0;
}
#slideshow a.last-active {
z-index:9;
}
</style></head>
<body style="background-image: url(http://www.geocities.jp/raisutei/gazou/haikei.jpg);"><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116062;var jpt=1401374340</script><script language="JavaScript"
<table style="text-align: left; margin-left: auto; margin-right: auto; width: 805px; height: 409px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><!-- this will work with any number of images --><!-- set the active class on whichever image you want to show up as the default (otherwise this will be the last image) -->
<div style="text-align: center;" id="slideshow"><a href="http://www.geocities.jp/raisutei/consept.html"><img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/karaageintro.png" alt="Slideshow Image 1" class="active" align="middle"></a>
<a href="http://www.geocities.jp/raisutei/okomeconsept.html">
<img style="width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/ocomeintro.png" alt="Slideshow Image 2"></a><a href="http://www.geocities.jp/raisutei/gozen.html">
<img style="border: 0px solid ; width: 800px; height: 397px;" src="http://www.geocities.jp/raisutei/gazou/introduce/gozenintro.png" alt="Slideshow Image 3"> </a></div>
</td>
</tr>
</tbody>
</table>
※一部中略しました。
お礼
ありがとうございます！！ なるほど…そっかあ！！全然思い浮かばなかったです。 すっきりしました。 とっても参考になりました、ありがとうございました！