• ベストアンサー
  • 困ってます

css、javascriptの外部化について

  • 質問No.7278268
  • 閲覧数390
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 50% (3/6)

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$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()", 4000 );
});
</script>
<!-- CSS -->
<style type="text/css">
#slideshow { position:relative; width:320px; height:240px; }
#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照:<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p>
<p>▼画像がフェードしながら切り替わります。</p>
<!-- CODE -->
<div id="slideshow">
<img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" />
<img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" />
<img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" />
</div>
<!-- / CODE -->
</div>
</body>
</html>

上記のソースをhtml、css、javascriptの三つのファイルに分けたいのですが、、、ちょっと分からなかったもので、、、
お願いします

単純に

cssファイル
#slideshow { position:relative; width:320px; height:240px; }
#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }

javascriptファイル
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$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()", 4000 );
});

htmlファイル
<script type="text/javascript" src="JSファイルのパス"></script>
<link rel="stylesheet" type="text/css" href="cssファイルパス" />

--------------------------------------

上記でいけると思ったのですが、、、単純すぎました

よろしくお願いいたします

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 41% (255/620)

通常はそれで問題ないですよ?
スクリプトの都合まではわからないので、何が問題なのかを仰らないと誰も理解出来ないと思いますよ。
お礼コメント
tomokin123

お礼率 50% (3/6)

何が問題か、分から無いと言う指摘、ありがとうございます

一からコーディングしましたら、、、問題なく動きました

既存のページにコーディングしたのが、ダメだったようです

お手数をおかけしまして、申し訳ありませんでした
投稿日時:2012/02/01 20:25
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ