JQex1:廣告輪播

三、練習2:淡入淡出切換照片

結果

.AD{margin:0 auto; width:1000px; height:560px;
    position:relative; /*新增*/
}
/*修改前
.AD div { display: none;}
.AD .on { display: block;}
.AD .title { border-top: 2px solid #f6c;}
*/

/*修改後,利用透明度控制,並設定position讓照片重疊*/
.AD div {
	opacity:0;
	position:absolute; left:0; top:0;
}
.AD .title {
	border-top: 2px solid #f6c;
	position:absolute; left:0; top:500px;
	width:100%;
}
//設定初始值,及新增speed變數,減少重覆輸入
$('.AD div:eq(0)').css('opacity',1);
var speed = 3000;
    
//修改$li中,click事件
var $li = $('.title li').hover(
	function(){$(this).addClass('over').siblings('.over').removeClass('over');}
	,function(){$(this).removeClass('over');})
	.click(function(){
		$(this).addClass('on').siblings().removeClass('on');
		$('.AD div').eq($(this).index()).animate({opacity:1},1000)
                    .siblings('div').animate({opacity:0},500);
	});
    
//以下未更動
$('.AD').hover(
	function(){ window.clearTimeout(timer);}
	,function(){timer=window.setTimeout(move,speed);}
);
    
var timer=window.setTimeout(move,speed);

function move(){
	var clickIndex = $('.title li.on').index();
		clickIndex = (clickIndex % $li.length)+1;
		$li.eq(clickIndex).click();
		timer=window.setTimeout(move,1000);
}