![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを
参考にしようとしています。皆様のお知恵をお貸しいただければ
幸いです。
http://jsdo.it/TFujinami/8EaB
こちらのソースで、フェードアニメーションで
メインイメージを変化させたいのですが、
どこを修正すればよいのでしょうか。
$(function(){
var slider_interval = 4000;
var slider_now = 0;
var slider_max = 0;
var slider_mouseover = false;
var slider_img_width = $("#slider").width();
var slider_href = new Array();
function sliderScroll(){
slider_now++;
if (slider_now > slider_max){ slider_now = 0; }
sliderAnimation(slider_now, 'slow');
}
function sliderAnimation(index, speed){
$('#slider .gallery .inner').animate({'margin-left':index * -1 * slider_img_width + 'px'}, speed, function(){
$('#slider .thumbnail div').removeClass('now');
$('#slider .thumbnail div:eq(' + index + ')').addClass('now');
$('#slider .frame a').attr('href', slider_href[index]);
});
}
var sliderLoop = function(){
if (! slider_mouseover){ sliderScroll(); }
slider_scroll_timer = setTimeout(sliderLoop, slider_interval);
}
$('#slider .thumbnail div').mouseover(function(ev){
slider_mouseover = true;
slider_now = $(this).attr('data-sliderid') - 0;
sliderAnimation(slider_now, 'fast');
});
$('#slider .thumbnail div').mouseout(function(ev){
slider_mouseover = false;
});
$('#slider .gallery .inner div').each(function(){
$(this).css('margin-left', slider_max * slider_img_width + 'px');
$(this).css({'position':'absolute', 'margin-top':'0px'});
slider_href.push( $(this).find('a').attr('href') );
slider_max++;
});
slider_max = 0;
$('#slider .thumbnail div').each(function(){
$(this).attr('data-sliderid', slider_max);
$(this).find('img').wrap( $('<a>').attr({'href':slider_href[slider_max], 'target':'flickr'}) );
slider_max++;
});
slider_max--;
$('#slider .frame img').wrap( $('<a>').attr('target', 'flickr') );
sliderAnimation(0, 'fast');
setTimeout(sliderLoop, slider_interval)
});
本来ならば作者様に質問する事がよいと思うのですが、
より多くの方からお知恵を拝借したいと考え、この場で質問
させていただきました。
何卒よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
似たような質問が…と思ったら、同じ方のようで。
実際にはどちらを使おうとなさっているのでしょうか?あっ、「参考にして」とあるので、自作なさるのかな…
ざっと見ただけですが、sliderAnimationが画像をスライドさせながら切り替えているところですので、ここをフェードで切り替えるようにすれば良さそう。
他の部分と他に関係があるかまでは確認していません。
スライドとフェードの場合では、それにみあったCSSも変わってくると思いますので、ご自分でなさりたいことのイメージがはっきりしているのなら、まず、HTMLの構成やCSSをそれにあわせておいてから、スクリプトを作成するほうが無駄なく簡潔なものにできるとおもいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
URLによってHTMLのテキストを変...
-
jQUery:フェードアニメーショ...
-
AjaxでJSONを受信すると、文字...
-
Selenium Basicの件
-
Javascriptを使ってQRコード読...
-
jQueryを使いformでsubmitした...
-
階層別の組織図の自動作成について
-
jQuery を外部ファイルから呼び...
-
カンマ区切りのデータを配列に...
-
インラインフレームを自動更新...
-
jQueryのblockUIをformのボタン...
-
二つのbxsliderをレスポンシブ...
-
JavaScriptでtabindexの変更っ...
-
スクリプトの外部からの読み込み
-
$.ajax({ って何ですか?
-
FullCalendar の複数月表示につ...
-
inputタグ内にあるid属性の意味?
-
jquery-1.3.2⇒○ 1.6.4.⇒エラー
-
.txtファイルの読み込み
-
jQuery.illuminateの使い方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxsliderで画像毎に表示時間を...
-
タブをフリックでスライドでき...
-
EPS で相対座標で円を書く方法
-
jQueryでメニューの開閉スライド
-
if文でelseが実行されない
-
選択範囲のリンク URL の抽出
-
URLによってHTMLのテキストを変...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
階層別の組織図の自動作成について
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
JavaScriptでtabindexの変更っ...
-
カンマ区切りのデータを配列に...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
-
tableのtr要素をドラッグ&ドロ...
-
FullCalendar の複数月表示につ...
おすすめ情報