简单的淡入淡出动画

（一）使用原生JS+CSS实现自动淡入淡出

1、CSS部分

<style>
	div{
	position:relative;
	width: 400px;
	}
	div>img{
	width: 100%;
	position:absolute;
	opacity: 0;   /*设置透明度*/
	transition: opacity 3s; /*过渡效果*/
	}
	.active{
	opacity: 1;
	}
</style>

2、标签元素

<div>
	<img src="images/1480068109864_.jpg"alt=""class="active"/>
	<img src="images/1487577506062_.jpg"alt=""/>
	<img src="images/1502978911919_.jpg"alt=""/>
	<img src="images/1503888743393_.jpg"alt=""/>
</div>

3、js部分

window.onload = function(){
var imgs = document.querySelectorAll('img');
var index = 0;
setInterval(loadImg,3000);
/********** 淡入淡出函数 ********/
function loadImg(){
imgs[index].className = '';
index++;
if(index >= imgs.length){
index = 0;
}
imgs[index].className = 'active';
}
};

（二）使用jQuery实现点击时淡入淡出

1、元素标签

<div class="bg">
	<div class="main">
	<img src="../images/wbq.jpg" alt=""/>
	</div>
	<div class="foot">
	<div><img src="../images/wbq.jpg" alt=""/></div>
	<div><img src="../images/xsy.jpg" alt=""/></div>
	<div><img src="../images/dp.jpg" alt=""/></div>
	</div>
</div>

2、js部分

$(function () {
	var $img = $('.foot img');
	var $mainImg = $('.main img');
	$img.bind('click', function (e) {
	var $self = $(this);
	$mainImg.fadeOut(1000,function(e){  //先淡出
	$mainImg.attr('src', $self.attr('src'));
	$mainImg.fadeIn(1000);        //再淡入
	});
	});
	});