BannderSlider(index)

JDX_ex4(index):BannderSlider

一、在header區加入Slider

範例結果

jdx0402

<header></header>
//$sliderBg
	$('header').append('<ul id="sliderBg"></div>');
	for(var i=0 ;i<8;i++){$('#sliderBg').append('<li></li>');}
	$('#sliderBg li').each(function(i) {
		i++;
	   $(this).css('background-image','url(images/slider/slider0'+i+'.jpg)');
	});
});

在瀏灠器之下結果

jdx0404

/*==#sliderBg區塊==================*/
#sliderBg li{
	width:100%; height:400px;  /*暫時設定高度,確認照片利用JQ加入情形*/
	background-position:center center; background-repeat:no-repeat;
	background-size:100% auto; /*為了讓照片依Window大小而設定*/	
}