jQUery：フェードアニメーションについて
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)
});
本来ならば作者様に質問する事がよいと思うのですが、
より多くの方からお知恵を拝借したいと考え、この場で質問
させていただきました。
何卒よろしくお願いいたします。
