`
ice-cream
  • 浏览: 329358 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

自动播放的jQuery幻灯片

阅读更多

来看下效果图:

 

 

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var theInt = null;
var curclicked = 0;

$(function(){
	autoPlay();
})

function autoPlay(){
$('#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($('#big_pic').attr('src') == $(this).attr('src')) return;
		t($('#pic_list img').index($(this)));
	});
}

  t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
    curclicked = i;
		$('#big_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#big_imgs').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#big_imgs').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,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};
      $('#big_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
      $('#big_imgs').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
      $('#big_imgs').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
      $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},500);
      $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,opacity:0.6},500);
      $('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
    },3000)
}
</script>

 

<style type="text/css">
body,div,ul,li { margin:0; padding:0;}
#autoplay { position:relative; width:342px; height:228px;} 
#transparence { position:absolute; left:0; bottom:0; width:100%; height:37px; border-top:1px solid #fff; background:#000; z-index:1;}  
#pic_list { position:absolute; left:0; bottom:0; list-style:none; overflow:hidden; z-index:2;} 
#pic_list li { float:left; width:39px; height:37px; padding-top:10px;margin:0 3px;}
#pic_list li img { position:absolute; top:15px; width:37px; height:25px; border:1px solid #fff;} 
#big_pic { position:absolute; width:100%; height:100%; border:none;}
</style>

 

<div id="autoplay">
	<a href="http://ice-cream.iteye.com/picture/8308" id="big_imgs"><img src="http://ice-cream.iteye.com/upload/picture/pic/8308/fe1bdce7-17d9-35c6-90a9-8cdf961df3e4.jpg" id="big_pic" alt=""></a>
	<ul id="pic_list">
		<li><a href="http://ice-cream.iteye.com/picture/8308"><img src="http://ice-cream.iteye.com/upload/picture/pic/8308/fe1bdce7-17d9-35c6-90a9-8cdf961df3e4.jpg" alt=""></a></li>
		<li><a href="http://ice-cream.iteye.com/picture/13325"><img src="http://ice-cream.iteye.com/upload/picture/pic/13325/3aeca676-fc57-3c9a-9407-70eeaf6ea84e.jpg" alt=""></a></li>
		<li><a href="http://ice-cream.iteye.com/picture/8352"><img src="http://ice-cream.iteye.com/upload/picture/pic/8352/1b6561c4-4a0b-39df-982b-322d6650b553.jpg" alt=""></a></li>
	</ul>
	<span id="transparence"></span>
</div>
 

demo code download

 

  • 大小: 21.3 KB
分享到:
评论
1 楼 karry 2010-11-04  
写的不错。
不过要注意执行效率,把反复使用的jQuery对象用变量缓存起来,避免反复查找DOM。

相关推荐

    自动滚动的jQuery幻灯片代码

    描述中提到的“自动滚动的jQuery幻灯片播放图片效果”,意味着这个代码实现了一个无需用户操作就能自动切换的幻灯片。这种效果通常由一个定时器控制,每隔一段时间自动切换到下一张幻灯片。同时,为了提供更好的用户...

    jquery 幻灯片 大全

    在本篇中,我们将深入探讨jQuery幻灯片的原理、常见插件以及如何利用它们来增强网站的用户体验。 一、jQuery 幻灯片基础 jQuery 是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和动画制作。幻灯片效果...

    带文字说明的jQuery幻灯片自动轮播代码.zip

    【jQuery幻灯片自动轮播代码详解】 在网页设计中,动态展示内容是吸引用户注意力的有效方式,而jQuery幻灯片自动轮播功能是其中常用的一种。本资源提供了一个带文字说明的jQuery幻灯片自动轮播代码示例,帮助开发者...

    jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码

    【jQuery幻灯片插件:实现自动轮播与暂停功能详解】 在网页设计中,幻灯片(Slider)是一种常用的设计元素,它能够以动态、吸引人的形式展示内容,如图片、文字或视频。jQuery是一个轻量级的JavaScript库,提供了...

    可拖动的高大上jquery幻灯片

    【可拖动的高大上jquery幻灯片】是一种网页设计技术,主要使用JavaScript库jQuery实现,用于创建具有动态效果的图片或内容展示模块。这种幻灯片通常包含多个页面,用户可以通过点击按钮或者直接拖动来切换不同的内容...

    jquery 幻灯片 带渐变

    首先,我们要理解jQuery幻灯片的基本原理。幻灯片通常由一系列图片或内容组成,通过定时切换显示,模拟出类似幻灯片的效果。在jQuery中,我们可以利用`.fadeIn()`和`.fadeOut()`方法实现元素的淡入淡出效果,模拟出...

    新闻jQuery幻灯片.rar_新闻jQuery幻灯片

    【新闻jQuery幻灯片】是一种常见的网页动态效果,主要用于展示新闻、图片或其他信息,通过平滑的过渡动画来吸引用户注意力并提供良好的用户体验。在网页设计中,jQuery库被广泛用于实现这种幻灯片功能,因为它提供了...

    带文字说明的jQuery幻灯片自动轮播代码

    在网页设计中,jQuery幻灯片自动轮播是一种常见的元素,用于吸引用户的注意力并展示重要信息。本资源提供了一款带有文字说明的jQuery幻灯片轮播代码,它结合了视觉效果与信息传递,适用于网站的首页、产品展示或者...

    Jquery 幻灯片

    1. **自动播放**:设置一定的间隔时间,幻灯片会自动切换到下一张,无需用户手动操作。 2. **左右箭头导航**:允许用户通过点击左右箭头来手动向前或向后切换幻灯片。 3. **圆点导航**:显示当前幻灯片在序列中的...

    自动滚动的jQuery幻灯片代码.zip

    【自动滚动的jQuery幻灯片代码】是一种常见的网页动态效果,用于展示一组图片或内容,以滑动的方式自动切换,通常被用作网站的焦点图或产品展示。这个压缩包包含实现这一效果所需的各种文件,如HTML、CSS、...

    Jquery幻灯片焦点图插件.rar

    《jQuery幻灯片焦点图插件详解》 在网页设计中,吸引用户注意力并提供良好的用户体验至关重要。jQuery作为一款强大的JavaScript库,为实现这一目标提供了丰富的功能。本篇文章将深入探讨一个特别实用的jQuery插件...

    jquery 幻灯片以及tabs切换插件

    在给定的场景中,可能使用的是一款基于 jQuery 的自定义幻灯片插件,它可以实现类似的效果,如内容的自动轮播、导航点指示和手动控制功能。 接下来,我们讨论 tabs 切换(Tabs Switch)。这是一种组织网页内容的...

    jQuery幻灯片插件Vmc Slider

    jQuery幻灯片插件Vmc Slider是一款用于网页中创建动态图像展示的工具,它通过集成jQuery库,提供了丰富的视觉效果和交互性。在网页设计中,幻灯片组件经常被用来展示产品、服务或者吸引用户的注意力,而Vmc Slider...

    jQuery幻灯片滑动块状区域覆盖切换代码.zip

    本资源“jQuery幻灯片滑动块状区域覆盖切换代码.zip”包含了一个实现幻灯片效果的代码示例,特别强调了滑动块状区域的覆盖切换。这种效果常常用于网站的首页展示,以吸引用户注意力并提供动态的用户体验。 幻灯片...

    jquery幻灯片播放特效

    本文将详细探讨"jQuery幻灯片播放特效"这一主题,结合"jquery-powerSwitch插件实现京东商城首页幻灯片切换效果"的实例,深入解析如何创建动态且吸引人的网页幻灯片。 首先,幻灯片播放特效是网页设计中常见的元素,...

    jQuery幻灯片漂亮

    jQuery幻灯片是一种常见的网页动态效果,用于展示一系列图片或内容,通过自动切换或用户交互来实现平滑过渡,为网站增添视觉吸引力。在网页设计中,jQuery库因其简洁的API和强大的功能而广受欢迎,尤其在创建幻灯片...

    仿新浪游戏首页带简介和缩略图的jQuery幻灯片.zip

    总的来说,"仿新浪游戏首页带简介和缩略图的jQuery幻灯片"是一个很好的实践项目,对于学习网页开发和jQuery特效的初学者来说非常有价值。通过这个项目,你可以掌握创建动态、交互性强的网页元素的方法,进一步提升...

    jQuery 幻灯片插件 多功能自动播放.zip

    下面,我们将深入探讨jQuery幻灯片插件的基本概念、工作原理以及可能的功能特性。 首先,jQuery幻灯片插件是用来创建滑动效果的,这种效果常见于网站的首页或者产品展示区域,能够吸引用户的注意力并提供一个交互式...

Global site tag (gtag.js) - Google Analytics