jQuery图片淡出淡进自动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片淡出淡进自动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
</head>
<body>
<style type="text/css">
body{background:#57beb9;}
/* main */
#main{width:920px;height:430px;overflow:hidden;position:relative;margin:30px auto;}
#main .box{width:820px;height:430px;box-shadow:0px 0px 5px #ddd;margin:0px auto;overflow:hidden;position:relative;}
#main .box img{width:820px;height:430px;position:absolute;left:0px;top:0px;opacity:0;filter:alpha(opacity=0);}
#main .btnLeft{width:35px;height:57px;position:absolute;left:0px;top:185px;background:url(images/left_ar.png) no-repeat 0px 0px;}
#main .btnRight{width:35px;height:57px;position:absolute;right:0px;top:185px;background:url(images/right_ar.png) no-repeat 0px 0px;}
#main .page{width:132px;height:22px;position:absolute;bottom:15px;right:50px;}
#main .page a{display:inline-block;width:22px;height:22px;background:url(images/num_grey.png) no-repeat 0px 0px;margin:0px 11px;float:left;color:#FFF;text-decoration:none;text-align:center;}
#main  .page a.active{background:url(images/num_red.png) no-repeat 0px 0px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){

	var aPage = $('#main .page a');		//分页按钮
	var aImg = $('#main .box img');		//图像集合
	var iSize = aImg.size();		//图像个数
	var index = 0;		//切换索引
	var t;
	$('#btnLeft').click(function(){		//左边按钮点击
		index--;
		if(index<0){
			index=iSize-1
		}
		change(index)
	})
	$('#btnRight').click(function(){    //右边按钮点击
		index++;
		if(index>iSize-1){
			index=0
		}
		change(index)
	})
	//分页按钮点击
	aPage.click(function(){
		index = $(this).index();
		change(index)
	});
	//切换过程
	function change(index){
		aPage.removeClass('active');
		aPage.eq(index).addClass('active');
		aImg.stop();
		//隐藏除了当前元素，所以图像
		aImg.eq(index).siblings().animate({
			opacity:0
		},1000)
		//显示当前图像
		aImg.eq(index).animate({
			opacity:1
		},1000)
	}

	 
	function autoshow() {
		index=index+1;
		if(index<=iSize-1){
		   change(index);
		}else{
			index=0;
			change(index);
		}
			
	}
	int=setInterval(autoshow,3000);
	function clearInt() {
		$('#btnLeft,#btnRight,.page a').mouseover(function() {
			clearInterval(int);
		})
	
	}
	function setInt() {
		$('#btnLeft,#btnRight,.page a').mouseout(function() {
			int=setInterval(autoshow,3000);
		})
	}
	clearInt();
	setInt();
})
</script>
<div id="main">
	<a class="btnLeft" id="btnLeft" href="javascript:void(0);"></a>
	<a class="btnRight" id="btnRight" href="javascript:void(0);"></a>
	<div class="box">
		<img style="opacity:1;filter:alpha(opacity=100);" src="images/intro1.jpg" />
		<img src="images/intro2.jpg" /> <img src="images/intro3.jpg" /> </div>
	<div class="page">
		<a class="active" href="javascript:void(0);">1</a>
		<a href="javascript:void(0);">2</a> <a href="javascript:void(0);">3</a>
	</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)