※ ChatGPTを利用し、要約された質問です(原文:crossSlideがうまく機能しないです;)
crossSlideがうまく機能しないです
2013/05/04 11:49
このQ&Aのポイント
簡単な画像切り替えのプラグインcrossSlideを使用して画像を表示しようとしていますが、表示されません。
HTMLとJavaScriptのコードに問題はなさそうですが、何が原因で画像が表示されないのかわかりません。
ブラウザにはタイトルが表示されるので、誤字や文法の問題ではないようです。
簡単な画像切り替えのプラグインとして、
crossSlideを見つけたので使用してみようとしたんですが、
全く何も表示されない状態で困っています。
下記のようにソースは記載しています。
<!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" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='js/jquery-1.9.1.min.js'></script>
<script type='text/javascript' src='js/jquery.cross-slide.js'></script>
<script type="text/javascript">
$(function(){
$('#mainvisual').crossSlide({
sleep: 1,
fade: 1
},[
{ src: 'images/01.jpg' },
{ src: 'images/02.jpg' },
{ src: 'images/03.jpg' }
]);
});
</script>
</head>
<body>
<p>タイトル</p>
<div id="mainvisual">
<p>写真</p>
</div>
</body>
</html>
cssは何も指定していません。
jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。
imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。
ブラウザには
<p>タイトル</p>
は表示されるのですが、
div#mainvisualの中の
<p>写真</p>の文字は表示されません。
何が原因なのでしょうか。
よければアドバイスの方よろしくお願いします。
質問の原文を閉じる
質問の原文を表示する
お礼
無事機能しました^^助かりました><ありがとうございました。 画像切り替えにCrossSlideを使うのはjQueryではもしかして一般的ではないのでしょうか。 簡単な記述でできるものとして、これが検索で出てきました。画像切り替えで一般的に使われてるものでお勧めがあれば教えていただけると嬉しいです><