現在、下記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回まで
  • 13歳以上
  • 登録:2010/12/10 11:15:13
  • 終了:2010/12/17 11:20:03

回答(1件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312010/12/10 19:35:42

ポイント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

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません