BannerBg改為左右平移(index)

JDX_ex4(index):#BannerBg改為左右平移

一、Html及CSS樣式修改

Step1:移除【jQuery:header slider 淡入淡出】設定

//header slider 淡入淡出
	var $sliders = $('#sliderBg').find('li');			//所有#sliderBg li
	var $sliderCount = $sliders.length;					//Slider li 個數
	var currentIndex = 0;
	$sliders.eq(currentIndex).animate({opacity:1},1000);					//#sliderBg li 第1張淡入
	setInterval(showSlider,1000);						//啟動計時器	
	
	//顯示下一張 showSlider function
		function showSlider(){
		//宣告 下一張slide 的Index ,且最後一張會變成第1張
			var nextIndex = (currentIndex +1) % $sliderCount;
			$sliders.eq(currentIndex).animate({opacity:0},1000);			//目前slidere淡出
			$sliders.eq(nextIndex).animate({opacity:1},1000);				//下一張的淡入
			currentIndex = nextIndex;						//更新目前的Index
		}

Step2:新增【左右平移時的,左右方按鈕】

將下方Html結構置於nav下方,如下圖

<div class="sliderControl">
    <ul class="arrows"> 
        <li class="prev"><i class="fa fa-arrow-left fa-5x" aria-hidden="true"></i></li> 
        <li class="next"><i class="fa fa-arrow-right fa-5x" aria-hidden="true"></i></li> 
    </ul>
</div>

hsliderbg_s01

修改JQ程式,如下圖

//$sliderBg
	$('header').append('<div id="sliderAll"></div>');
	$('#sliderAll').append('<ul id="sliderBg"></div>');
	$('.sliderControl').insertAfter('#sliderBg');
	$('#sliderAll').insertBefore('nav');

hsliderbg_s02 hsliderbg_s03

/*註解移除*/
#sliderBg li{position:absolute; left:0; top:0; opacity:0;}


/*新增*/
#sliderBg{ overflow:hidden;}
#sliderBg li{float:left;}

#sliderAll{ position:relative;}
#sliderAll .sliderControl .prev{ position:absolute; left:20px; top:230px; z-index:97; 
								color:#F2F757; text-shadow:1px 1px 10px #000000; cursor:pointer;}
#sliderAll .sliderControl .next{ position:absolute; right:20px; top:230px; z-index:97;
								 color:#F2F757; text-shadow:1px 1px 10px #000000; cursor:pointer;}