一起CSS

当前位置:一起CSS > 未分类 > 文章正文

自动播放的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)
}

查看Dome

查看:12,197 评论:16 标签:,

相关日志

已经有 16 条群众意见

  1. keelii

    呵呵。好晕啊,这两天我回学校网站换IP我都不知道,看到你的好着就估计是有问题了^!^ 对话

    #1
  2. 青色keelii

    那两天网站不行了,我也挺着急的,多亏了温老师日夜不停的忙活(查看邮件的发送时间是凌晨 4 点多),才使网站尽快的回复了,真是辛苦他了。
    换了 IP ,域名解析等要重新弄一下哦。 对话

    #2
  3. 蜗牛

    不错的东西 对话

    #3
  4. 小王

    挺好的 对话

    #4
  5. 小王

    请问clearInterval()setInterval()方法都是怎么用的?麻烦帮我解答一下,谢谢 对话

    #5
  6. sesion

    这个效果很好。
    有一个小问题希望解决一下,如果我用鼠标在那排小图上不停地晃动,因为每经过小图一次大图就必须相应显示一次,所以我在小图上快速晃动鼠标十几次,我的电脑一下子就死掉了。
    加上每秒钟鼠标经过次数限制就好了。 对话

    #6
  7. sesion

    我突然腾讯的客服网页也有这个效果,但就不会出现这个问题。
    http://service.qq.com/index.html 对话

    #7
  8. wxmilk

    这个效果很酷啊~浏览我的网站 对话

    #8
  9. 青色小王

    setInterval() 方法是按制定的周期调用函数或计算表达式;而 clearInterval() 方法是取消 setInterval() 方法设置的 timeout 。具体的用法你可以百度或 google 一下,因为不是一句两句就能讲清楚。 对话

    #9
  10. diandian

    请问版主对于最上面的那种效果有完整的代码不,想看下如何调用,谢谢 对话

    #10
  11. 青色diandian

    很抱歉,我不清楚你指哪里? 对话

    #11
  12. andy

    大大图上要能添加广告语,最好是三行分别控制格式的文字 对话

    #12
  13. 青色andy

    你可以根据自身情况自行添加。 对话

    #13
  14. andy青色

    老大,偶就是不懂jQuery哎,要是能和网上另一款雷同的效果结合起来就真的完美了,那一款能加文字,但不能添加链接,老大能费神做一下么?那我们这群js菜鸟就有福了^^
    我的邮箱andydn@21cn.com 对话

    #14
  15. andyandy

    看来难度不小哦 对话

    #15
  16. long

    不兼容IE6啊,,,有点BUG 对话

    #16

我要发表意见