hwSlider-內容滑動切換效果（一）

內容滑動切換應用程式非常廣，常見的有幻燈片焦點圖、畫廊切換等。隨著WEB前端技術的廣泛應用，內容滑動切換效果佔據著web頁面重要地位，因此本站Helloweba特別為廣大前端愛好者安排了淺顯易懂的內容滑動切換效果的開發教程。



查看示範下載原始碼


          本教學課程分三個部分：1、使用jQuery開發基本的內容滑動切換效果，2、支援行動端觸控自適應的內容滑動切換效果，3、封裝內容滑動切換效果jQuery插件。本文講解第一部分，後面兩部分會在接下來的文章中陸續發布，敬請關注。

本文將結合實例實現內容滑動切換的基本效果，包括：

左右箭頭切換

# 無限無縫滾動

圓點按鈕切換

動畫效果

自動切換

HTML

首先準備HTML結構，整個滑動區域用#hwslider包裹，包括滑桿內容，滑桿使用ul li組織內容，滑桿內容可以是圖片、文字等任意HTML內容。 #dots即圓點切換導航，由多個小圓點組成，對應滑桿數量，一般位於滑動區域的下方。 .arr則是由兩個左右方向鍵組成。

[code=html]
<p id="hwslider">
	<ul>
		<li class="active"><a href="#"><img src="images/s1.jpg" alt="1"></a></li>
		<li><a href="#"><img src="images/s2.jpg" alt="2"></a></li>
		<li>Helloweba</li>
	</ul>
	<p id="dots">
		<span data-index="1" class="active"></span>
		<span data-index="2"></span>
		<span data-index="3"></span>
	</p>
	<a href="javascript:;" id="prev" class="arr"><</a>
	<a href="javascript:;" id="next" class="arr">></a>
</p>

CSS

使用CSS完成滑動區域各組件的佈局，注意其中#hwslider需要設定position: relative以及寬度和高度，那麼滑桿#hwslider ul li設定position :absolute，預設只顯示.active的滑桿，超出尺寸部分會被隱藏。而圓點導航#dots和箭頭導航.arr都要設定position: absolute，箭頭導航預設不顯示，當滑鼠滑向滑桿區域時才顯示。再一個要注意的是#dots和.arr的z-index設定成2，即都應該顯示在滑塊上面。您可以修改css樣式以滿足各種需求，請看以下程式碼：

[code=css]
#hwslider{width: 600px;height: 320px;margin:40px auto; position: relative; overflow: hidden;}
#hwslider ul{width: 600px; height: 320px; position: absolute; z-index: 1}
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 600px;height: 320px; overflow: hidden;}
#hwslider ul li.active{display: block;}
#dots{position: absolute; bottom:20px; left:270px; width: 60px; height: 12px; z-index: 2;}
#dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;}
#dots span.active{background: orangered}
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none}
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;}
#hwslider:hover .arr{display: block; text-decoration: none;color: #fff}
#prev{left: 20px}
#next{right: 20px}

jQuery

我們使用jQuery來實現滑動切換的各種效果，首先我們引入百度CDN提供的jQuery函式庫和hwslider.js。

[code=html]
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/hwslider.js"></script>

接著我們在hwslider.js中預先定義變數參數：

[code=js]
$(function(){
	var slider = $("#hwslider");
	var dots = $("#dots span"),
		prev = $("#prev"),next = $("#next");
	var sliderInder = slider.children('ul')
	var hwsliderLi = sliderInder.children('li');
	var hwsliderSize = hwsliderLi.length;  //滑块的总个数
	var index = 1; //初始显示第一个滑块
	var speed = 400; //滑动速度
	var interval = 3000; //间隔时间
	var autoPlay = false; //是否支持自动滑动
	var clickable = true; //是否已经点击了滑块在做滑动动画

});

以上定義了各種需要的變數，其中clickable用於限制點擊滑桿動畫，因為滑桿滑動過程需要時間完成，如果連續點擊箭頭的話，正常情況如果不限制點擊，則會在滑動動畫未完成的情況下又進行下一個滑動動畫，這樣可能會導致頁面卡住的情況。
接下來我們來寫移動動畫函數moveTo()。接受兩個參數，index即要滑動的目標滑塊，dir是滑動方向，有next和prev。我們實現滑動動畫的原理是，當前滑桿向左或向右移動的距離剛好是滑桿的寬度，我們把這個寬度看作可視區，滑動時，當前滑桿會向左或向右移出可視區，而緊接著下一個滑桿從左或從右側進入可視區。我們使用jQuery的animate()方法來實現動畫效果，兩個滑桿的運動速度speed保持一致，就實現了無縫滾動的效果。另外當滑動完成時，及時變換圓點切換的樣式。

[code=js]
	var moveTo = function(index,dir){ 
		if(clickable){
			clickable = false;

			//位移距离
			var offset = slider.width();
			if(dir == 'prev'){
				offset = -1*offset;
			}

			//当前滑块动画
			sliderInder.children('.active').stop().animate({
				left: -offset},
				speed,
				 function() {
				 	$(this).removeClass('active');
			});
			//下一个滑块动画
			hwsliderLi.eq(index-1).css('left', offset + 'px').addClass('active').stop().animate({
				left: 0}, 
				speed,
				function(){
					clickable = true;
			});

			dots.removeClass('active');
			dots.eq(index-1).addClass('active');

		}else{
			return false;
		}
	}

綁定左右箭頭的點擊事件，當點擊箭頭時，判斷當前滑桿是否是第一個滑桿或最後一個滑桿，並重新定義index，從而實現無線滾動效果，然後分別呼叫moveTo()函數，實現滑動動畫效果。

[code=js]
	next.on('click', function(event) {
		event.preventDefault();
		if(clickable){
			if(index >= hwsliderSize){
				index = 1;
			}else{
				index += 1;
			}
			moveTo(index,'next');
		}
	});

	prev.on('click', function(event) {
		event.preventDefault();
		if(clickable){
			if(index == 1){
				index = hwsliderSize;
			}else{
				index -= 1;
			}

			moveTo(index,'prev');
		}
		
	});

接著，綁定圓點導航的點擊事件，當點擊小圓點時，獲取當前點擊的圓點序號，即點擊的是第幾個圓點，就對應的第幾個滑桿，然後呼叫moveTo()完成切換動畫。

[code=js]
	dots.on('click',  function(event) {
		event.preventDefault();
		
		if(clickable){
			var dotIndex = $(this).data('index');
			if(dotIndex > index){
				dir = 'next';
			}else{
				dir = 'prev';
			}
			if(dotIndex != index){
				index = dotIndex;
				moveTo(index, dir);
			}
		}
	});

自動切換，首先我們要定義一個定時器，每隔一定的時間setInterval執行play()，play()每執行一次就會變化index參數，呼叫moveTo實現切換效果。最後當滑鼠滑上滑桿時清除定時器timer，滑鼠移開滑桿時又重新啟動定時器自動切換。

[code=js]
	if(autoPlay){
		var timer;
		var play = function(){
			index++;
			if(index > hwsliderSize){
				index = 1;
			}
			moveTo(index, 'next');
		}
		timer = setInterval(play, interval); //设置定时器

		//鼠标滑上时暂停
		slider.hover(function() {
			timer = clearInterval(timer);
		}, function() {
			timer = setInterval(play, interval);
		});
	};

最後將程式碼整理後，你將可以看到一個基本的滑動切換效果，你也可以下載原始碼測試。

 以上是hwSlider-內容滑動切換效果（一） 的內容，更多相關內容請關注PHP中文網（www.php.cn）！

相關文章：

#實例幫助你了解HTML5滑動區域選擇元素Slider element

hwSlider-內容滑動切換效果（二）：響應式可觸控滑動

#微信小程式slider元件詳細介紹