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

最新推荐文章于 2024-09-14 18:52:56 发布

chen106106

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量157

点赞数

分类专栏： jquery学习笔记文章标签： xhtml javascript 操作系统 ViewUI

本文链接：https://blog.csdn.net/chen106106/article/details/84249141

版权

jquery学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>