現在、下記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

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

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2010/12/17 11:20:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答1件)

id:Lhankor_Mhy No.1

回答回数814ベストアンサー獲得回数232

ポイント60pt

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

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);

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

id:ahsodik

Lhankor_Mhyさま

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

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

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

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

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

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

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

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

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

2010/12/13 19:56:04

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません