人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

現在、下記URLのCSS、jqueryを使用して、ブラウザサイズいっぱいに広がる背景画像がスライドショーになる、というWebサイトを作成しているのですが、スライド画像の切り替わりがもっとスムーズにならないかと考えています。コード追加等画像切り替えをスムーズにする方法をお分かりになる方いらっしゃいましたら、ぜひご教授いただきたいと考えております。

▼使用しているコードはこちらです
http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/#anc6

▼上記コードで作成しているサイトはこちらです
http://webdesignrecipes.com/full-page-background-image-sample-05.html

ご回答のほど、何卒よろしくお願いいたします。

●質問者: ahsodik
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS jQuery URL webサイト コード
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy
●60ポイント

「スムーズに」というのがどういう状態なのか分からないのですが、仮に「ゆっくり変化する」ことをご希望だったとして。

jquery.maximage.jsの261行目

 $('.slide-'+lastSlide).css({'z-index':opts.zIndex-1}).fadeOut('slow');
 $('.slide-'+currentSlide).css({'z-index':opts.zIndex}).fadeIn('slow');

を、

 $('.slide-'+lastSlide).css({'z-index':opts.zIndex-1}).fadeOut(10000);
 $('.slide-'+currentSlide).css({'z-index':opts.zIndex}).fadeIn(10000);

などとすれば、かなりゆっくりになります。

◎質問者からの返答

Lhankor_Mhyさま

ご回答いただきありがとうございます。

また返信遅れてしまい申し訳ありません。

実現したい「スムーズな動き」というのは下記URLのような動きです。

http://line25.com/wp-content/uploads/2010/slideshow/demo/demo.ht...

上記URlの様な滑らかなスライドショーをフルサイズの背景画像で実現したいと思い、

質問に記載したjqueryの他にもいろいろ探してるのですが、画像サイズが1000pxを超える

大きさであることも影響してか、なかなかスムーズに動いてくれません...

もう少し、調べてみたいと思います。

ご回答、重ねてお礼申し上げます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ