用jQuery的动画函数实现幻灯片的效果

chen106106

浏览: 407590 次
性别:
来自: 深圳

最近访客更多访客>>

linsonlmy

feiyue81

Kira_喵

kt-zhang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery学习笔记

jquery的给我们提供了一些简单的动画效果，主要有显示（show()）,影藏(hide()),滑动 (slideDown(),slideUp()),和淡入淡出的效果(fadeIn(),fadeOut()),同时还可以写我们自己的动画函数，主要是修改元素的css属性来达到动画效果.

下面是具体的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用jQuery实现幻灯片的浏览图片的效果</title>
<style type="text/css">
body{
    font-family:arial
}
 
.clear {
    clear:both
}
 
#gallery {
    position:relative;
    height:360px
}

/**让所有的图片都重叠在一起，如果不加这个样式，那么图片会按照默认的流布局的方式来排列显示*/
    #gallery a {
        float:left;
        position:absolute;
    }
     
    #gallery a img {
        border:none;
    }
     
    #gallery a.show {
       
    }
 
 
    #gallery .caption {
        z-index:600;
        background-color:#000;
        color:#ffffff;
        height:100px;
		/*设置成图片的宽度*/
        width:580px;
        position:absolute;
        top:0;

    }
 	
    #gallery .caption .content {
        margin:5px
    }
    
    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#1DCCEF;
    }
	
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "> 
</script>

<script type="text/javascript" >
	
	
    $(document).ready(function() {      
		
		//设置所有图片的不透明度为0
		
		$("#gallery a").css("opacity",0);

		//让当前显示的类的不透明度为1 
		$("#gallery .show").css("opacity",1);

		//让标题栏显示为半透明，这样不会掩盖图片的内容
		$("#gallery .caption").css("opacity",0.7);
		$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
		//每隔一段时间就影藏当前显示的图像，显示下一幅图像，同时修改标题栏的内容,如果到了最后就显示第一幅图像。这样依次循环
		setInterval("slideDown()",4000);
		
});

function slideDown(){
	
  //获取当前显示的图片
  var currImg = $("#gallery .show");

  //获取下一幅要显示的图片和需要显示的标题栏的内容
  var nextImg = ((currImg.next().length) ? ((currImg.next().hasClass('caption'))? $('#gallery a:first') :currImg.next()) : $('#gallery a:first'));	
 
  var content = nextImg.find("img").attr("rel");

  //让当前的图像以动画的形式影藏
  currImg.animate({opacity: 0.0}, 1000)
	.removeClass('show');

  nextImg.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

  //修改标题栏的内容
  $("#gallery .content").html(content);

}

</script>
</head>

<body>
<div id="gallery">
 
    	<a href="#" class="show">
		<img src="http://ww4.sinaimg.cn/thumbnail/9bdb943fgw1duv0h4llnfj.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>
	</a>
	
	<a href="#">
		<img src="http://ww3.sinaimg.cn/thumbnail/9bdb943fgw1duv0hhpmfij.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" rel="<h3>Grass Blades</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "/>
	</a>
	
	<a href="#">
		<img src="http://ww1.sinaimg.cn/thumbnail/9bdb943fgw1duv0hsiy2lj.jpg" alt="Ladybug" width="580" height="360" title="" alt="" rel="<h3>Ladybug</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
	</a>

	<a href="#">
		<img src="http://ww3.sinaimg.cn/thumbnail/9bdb943fgw1duv0hyhz39j.jpg" alt="Lightning" width="580" height="360" title="" alt="" rel="<h3>Lightning</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
	</a>
	
	<a href="#">
		<img src="http://ww3.sinaimg.cn/thumbnail/9bdb943fgw1duv0i8t3qfj.jpg" alt="Lotus" width="580" height="360" title="" alt="" rel="<h3>Lotus</h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."/>
	</a>
	
	<a href="#">
		<img src="http://ww4.sinaimg.cn/thumbnail/9bdb943fgw1duv0ifymd7j.jpg" alt="Mojave" width="580" height="360" title="" alt="" rel="<h3>Mojave</h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."/>
	</a>
		
	<a href="#">
		<img src="http://ww4.sinaimg.cn/thumbnail/9bdb943fgw1duv0in60l5j.jpg" alt="Pier" width="580" height="360" title="" alt="" rel="<h3>Pier</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
	</a>
	
	<a href="#">
		<img src="http://ww3.sinaimg.cn/thumbnail/9bdb943fgw1duv0it9d5nj.jpg" alt="Sea Mist" width="580" height="360" title="" alt="" rel="<h3>Sea Mist</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
	</a>
	
	<a href="#">
		<img src="http://ww1.sinaimg.cn/thumbnail/9bdb943fgw1duv0j2i70dj.jpg" alt="Stone" width="580" height="360" title="" alt="" rel="<h3>Stone</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
	</a>
	
	<!--显示在图片下方的标题头文字 -->
	<div class="caption"><div class="content">
			
	</div></div>
</div>
<div class="clear"></div>
</body>
</html>

分享到：

jQuery写的tab选项卡 | jQuery用面向对象的思想来编写验证表单的插 ...

2012-07-13 10:57
浏览 1228
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用jQuery的动画函数实现幻灯片的效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用jQuery的动画函数实现幻灯片的效果

评论

发表评论

相关推荐

jquery mobile tel call

自己写的一个简单的jquery 日期插件

jQuery 瀑布流插件

jquery 制作幻灯片浏览图片

jQuery写的tab选项卡

jQuery用面向对象的思想来编写验证表单的插件

Jquery实现返回顶部的功能

项目中常用的jquery 范例

jquery 判断某个元素是否绑定 click事件

最近访客更多访客>>