お世話になります。
スライドの画像が変わるたびに背景色も変わるタイプのスライドショープラグインを探しています。
サンプルとして
http://elegantthemes.com/preview/eStore/
こちらのサイトの様な感じにしたいと思っています。
中央部分がスライドショーになっており両サイドが背景となっているようです。
ソースを見てみるとslideというクラスがついた要素全体をスライドするようです。
画像だけでなく文字や背景も変わっています。
ようはインラインコンテンツそのものをスライドするタイプのものであれば良いのかなと思います。
lightboxのようなイメージギャラリーですとインラインコンテンツを表示するタイプのものがありますが、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものは無いでしょうか?
もしくは簡単なjQueryで出来そうならご教授願いたいと思います。
No.1ベストアンサー
- 回答日時:
>中央部分がスライドショーになっており両サイドが背景となっているようです。
背景と画像は同じ要素に設定されていて、背景に見えるところが背景色、画像に見えるところが背景画像になっているようです。
背景画像は、no-repeat top centerで配置されていますので、繰り返しが無く外側の部分は背景色が見えているだけです。
それなので、この部分の仕組みとしてはdiv要素をフェードインさせて切替えているだけとなります。
他に、メニュー部分を上下させたりクリックすると対応するものが表示されたりするなど、いろいろあるので複雑にはなっていますが、切替えの原理的としては(↑)のような比較的単純なものになっています。
>画像だけでなく文字や背景も変わっています。
切替えるdiv要素の中に全部記されているので、セットの親になっているdivを切替えることで、全部切替わるように構成されています。
>単純にフェードインアウトするスライドショーでインライン
>コンテンツをスライドさせるものは無いでしょうか?
探せばいろいろあるのではないかと思います。(文字通り『スライド』させるものや、フェードさせるものや両方同時のものなど)
直接画像要素を対象にしたものが多いかもしれませんが、div要素なども対象にできるものを探せばよろしいかと。
>もしくは簡単なjQueryで出来そうならご教授願いたいと思います。
一定時間で切替わるだけの、ごくシンプルなサンプルを…
(jQueryを利用しているので、スクリプト自体は5行程度です)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#slides div.slide {
height:300px;
width:100%;
background-repeat:no-repeat;
background-position:top center;
}
#slides div.caption {
position:relative;
width:600px;
height:300px;
margin: 0 auto;
}
#slides div.content {
position:absolute;
right:0;
bottom:0;
width:200px;
height:100px;
background-color:#fff;
border:4px solid #ddd;
padding:30px;
font-weight:bold;
}
//-->
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
</head>
<body>
<div>
<div id="slides">
<div class="slide" style="background-color:#776; background-image:url(img/photo01.jpg);">
<div class="caption"><div class="content">コメント1</div></div>
</div>
<div class="slide" style="background-color:#e84; background-image:url(img/photo02.jpg);">
<div class="caption"><div class="content">コメント2</div></div>
</div>
<div class="slide" style="background-color:#abb; background-image:url(img/photo03.jpg);">
<div class="caption"><div class="content">コメント3</div></div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
$("#slides div.slide").hide().filter(":first-child").show();
var interval = setInterval(function(){
var elm = $("#slides div.slide:visible").hide().next();
(elm.length?elm:$("#slides div.slide:first-child")).fadeIn(1000);
}, 4000);
//-->
</script>
</body>
</html>
この回答への補足
ご返答ありがとうございます!
サンプルまで作成して頂き本当にありがとうございます。
試しにやってみたのですが、どういったわけか画像が読み込めません。
パスが違ってるのかと思い見直しましたがそうではなさそうです。
現在の状態は背景のみ切り替わっている状態です。
画像さえ表示出来れば完璧なのですが、何が原因かお分かりでしょうか?
すみません。
出来ました!
原因はよくわかりませんでしたが、サンプルではなくて実装してみたら出来ました。
やはりパスなのか?でもパス部分はコピペでしたし。。。
とにかく出来ました!
本当にありがとうございました!
No.2
- 回答日時:
#1です。
>どういったわけか画像が読み込めません。
>パスが違ってるのかと思い見直しましたがそうではなさそうです
普通にstyle="~"で背景画像を指定しているだけですので、再度パス等を御確認ください。
リピートなしですので、ある程度のサイズのある画像でないと見えないのかも…
(一応、表示サイズはサンプルサイトより小さめの600×300ピクセルで仮定しています。)
ご提示の例が背景画像で処理していたので、そのまま背景画像の設定を行なう方法にしてありますが、背景画像の設定をやめて(背景色は生かしておいて)、
<div class="caption">内に通常の<img src="~" alt="">を入れるような方法でも、あるいはdiv.captionに背景画像を設定するような方法でも、そのままで同じように動作するはずです。
#1のサンプルでは、div.captionの要素が(↑)で書きましたように600×300ピクセルになっていて、表示位置がセンタリングされています。
div.slideの要素のほうは、ブラウザの幅に合うようにwidthを指定していません。
(そのままであれば100%になるはず。高さはcaptionに合わせて300ピクセル。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) エクセルから、パワーポイントのスライドを複数作成する。 1 2022/07/08 09:40
- Windows 10 Windows10のロック画面でスライドショーのフォルダー追加ができません 4 2023/06/07 13:05
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- Visual Basic(VBA) PowerPoint VBA で画像の鮮明度を変更する方法がわかりません 2 2023/03/24 13:34
- Windows 95・98 タスクバーの背景の色だけを変えたい。 2 2022/07/13 14:44
- その他(ブラウザ) zoomのバーチャル背景が選べない 4 2022/12/08 12:38
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- 画像編集・動画編集・音楽編集 動画の不要な部分を透過出来るフリーソフトありませんか? 3 2023/06/08 09:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「画像クリックで音声再生」を ...
-
jQueryで同じクラス名のものを...
-
fancyboxのポップアップ時の画...
-
JavaScriptでの画像切り替えを...
-
ランダムで表示させたブロック...
-
フェードインで文章を切り替え...
-
マウスカーソルに合わせて画像...
-
Colorboxがうまく設置できません
-
MAX関数を使ってからLEFT JOIN...
-
JavaScriptで変更した属性の元...
-
createElementで作成した要素を...
-
動的にHTMLコンテンツを吹き出...
-
サムネイルにマウスオーバーで...
-
同一ページ内で、任意の文字列...
-
カレントページ aタグではなく...
-
HTMLタグに複数のクラスを設定...
-
OpenCVで固定枠で画像を操作す...
-
読み込んだQRコードをフォーム...
-
助けてください… jQuery 左右に...
-
JSPでの画像ファイル表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
jQueryでのドラッグアンドドロ...
-
複数bxsliderをタブで切り替え...
-
画像の表示位置
-
JavaScriptでの画像切り替えを...
-
Colorboxがうまく設置できません
-
clear機能を失わずにファイルア...
-
embed要素のsrc属性の値を変更...
-
JQueryでオープニングアニメー...
-
全部のサイコロをjavascriptで...
-
一定時間で入れ替わるバナー画...
-
JQueryで画像の上で文字を動かす
-
スクリプト
-
画像拡大とともにエレメントも...
-
JavaScript スクロール制御
-
アップロードファイルの種類に...
-
サムネイルにカーソルを合わせ...
-
htmlの中のhtmlをタブで切り替え
おすすめ情報