BannerBg改為左右平移(index)

二、開始【水平Slider】設定及下方數字按鈕設定

S1:水平Banner排版,加入至 sliderBgFn()中,注意變數宣告位置造成問題,如下圖

hsliderbg_s08

	var $sliderliW,$sliderliH								//#sliderBg li 寬/高設定
		,$slidersli=$('#sliderBg').find('li')				//找出$('#sliderBg').find('li')
		,$sliderslength										//#sliderBg li個數
		,$sliderBgWidth;									//求得#sliderBg總寬度

	function sliderBgFn(){
		
		//修正當螢幕寬度縮小時,照片縮放情形
		$sliderliW = $(window).width();
		console.log($sliderliW);
		$sliderliH = $sliderliW/2.6;
//		$('#sliderBg').css('height',$sliderliH);
		$('#sliderAll .sliderControl .prev,#sliderAll .sliderControl .next').css({'top':$sliderliH/2});
		$('#sliderBg li').each(function(i) {
			i++;
		   $(this).css({'background-image':'url(images/slider/slider0'+i+'.jpg)',
		   				'height': $sliderliH,'width':$sliderliW,'background-size':'100% auto'});
		});
		//Banner CSS排版
			$sliderslength = $slidersli.length;
			$sliderBgWidth = $sliderliW * $sliderslength;
			//alert($sliderliW);
		$('#sliderBg').css({'width':$sliderBgWidth,'height':$sliderliH});
		
	}	//sliderBgFn end

S2:下方新增數字按鈕,加入至 sliderBgFn()中。

//產生SliderControlNo li選項
	var _sCtrl='';
	for (var i=0, j=$sliderslength; i<j ; i++){
		_sCtrl += '<li class="numberNo' + (i+1) + '">' + (i+1) + '</li>';
	}
	//產生ul 將numbers li 加入其中
		var _sNumber = $('<ul class="numbers"></ul>').html(_sCtrl).appendTo('.sliderControl');
			$sNumberLi = _sNumber.find('li');
			$sNumberLi.eq(0).add(($slidersli).eq(0)).addClass('active');

S2:針對下方數字按鈕,進行美化

#sliderAll .numbers {position:absolute; bottom:20px; left:50%; }
#sliderAll .numbers li{ float:left; padding:0 5px; line-height:20px; background:#666; 
						cursor:pointer; color:#FFFFFF; margin-left:10px; border-radius:50%;}
#sliderAll .sliderControl .active{ background:#F3696C;}

如下圖

hsliderbg_s04

S3:調整下方數字鈕置中

sNoLeftFn();
function sNoLeftFn(){
		$snumberLeft = ($sliderliW-$('.numbers').width())/2;
		$('.numbers').css('left',$snumberLeft);
}
$(window).resize(function(){
	sliderBgFn();
	sNoLeftFn();
});
/*移除*/

#sliderAll .numbers { /*left:50%;*/}

S4:針對下方數字按鈕,設定Click事件

參考連結:animate方法效果動畫stop()方法stop()本網說明

//將numbers li 加入click事件
	$sNumberLi.click(function(){
		$(this).add(($slidersli).eq($(this).index())).addClass('active').siblings('.active').removeClass('active');
		$('#sliderBg').stop().animate({left:$sliderliW * $(this).index() *-1},600);
	});

S4:確認頁面無水平捲軸

#sliderAll{overflow:hidden;}