自动播放的jQuery幻灯片
读者“辣椒”在《jQuery写的一个幻灯片》中留言说幻灯片没有自动播放效果,其实写好之后不久就觉得少了点什么,看来看去,最后发现就是缺少自动播放效果,想找个时间把自动播放的效果加上,但似乎总是没有时间。今天就乘读者“辣椒”提出了这个问题,就抽时间写一下吧。
结构和样式都没有变,只有 jQuery 代码有变,具体的代码如下:
var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
t($('#pic_list img').index($(this)));
});
});
t = function(i){
clearInterval(theInt);
if( typeof i != 'undefined' )
curclicked = i;
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
theInt = setInterval(function (){
i++;
if (i > $('#pic_list img').length - 1) {i = 0};
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
},3000)
}