簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、全く何も表示されない状態で困っています。下記のようにソースは記載しています。 $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); タイトル写真 cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。ブラウザにはタイトルは表示されるのですが、 div#mainvisualの中の写真の文字は表示されません。何が原因なのでしょうか。よければアドバイスの方よろしくお願いします。

crossSlideがうまく機能しないです；

解決済

質問者：papasu0545
質問日時：2013/05/04 11:49
回答数：1件

簡単な画像切り替えのプラグインとして、
crossSlideを見つけたので使用してみようとしたんですが、
全く何も表示されない状態で困っています。

下記のようにソースは記載しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>の文字は表示されません。

何が原因なのでしょうか。
よければアドバイスの方よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yamada_g
回答日時：2013/05/07 14:23

CrossSlideは全く使ったことがなく、この質問で初めて知ったものですが、

記載のコードをそのまま動かすと
CrossSlide: container element does not have its own width and height
というエラーメッセージが出力されました。
ですので、widthとheightを設定すればいい、というかしなければいけないと思います。

また、CrossSlideを適用する要素に他の要素を入れてもimg要素のみになってしまうようです。

- 0
- 件

通報する

この回答へのお礼

無事機能しました＾＾助かりました＞＜ありがとうございました。
画像切り替えにCrossSlideを使うのはjQueryではもしかして一般的ではないのでしょうか。
簡単な記述でできるものとして、これが検索で出てきました。画像切り替えで一般的に使われてるものでお勧めがあれば教えていただけると嬉しいです＞＜

通報する

お礼日時：2013/05/07 20:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！