基於jQuery和hwSlider實現內容左右滑動轉場效果附源碼下載（一），jqueryhwslider

基於jQuery和hwSlider實現內容左右滑動轉場效果附源碼下載（一），jqueryhwslider

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

先給大家展示下，感覺還不錯請參數實現代碼，具體效果如下所示：

效果展示      源碼下載

本次教程分三個部分：

1、使用jQuery開發基本的內容滑動轉場效果，

2、支援移動端觸控自適應的內容滑動轉場效果，

3、封裝內容滑動轉場效果jQuery外掛程式。

本文講解第一部分，後面兩部分會在接下來的文章中陸續發布，敬請關注。

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

左右箭頭切換

無限無縫滾動

圓點按鈕切換

動畫效果

自動切換

HTML

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

<div 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> <div id="dots"> <span data-index="1" class="active"></span> <span data-index="2"></span> <span data-index="3"></span> </div> <a href="javascript:;" id="prev" class="arr"><</a> <a href="javascript:;" id="next" class="arr">></a> </div>

CSS

使用CSS完成滑動地區各組件的布局，注意其中#hwslider需要設定position: relative以及寬度和高度，那麼滑塊#hwslider ul li設定position:absolute，預設只顯示.active的滑塊，超出尺寸部分將被隱藏。而圓點導航#dots和箭頭導航.arr都要設定position: absolute，箭頭導航預設不顯示，當滑鼠滑向滑塊地區時才顯示。再一個要注意的是#dots和.arr的z-index設定成2，即都應該顯示在滑塊上面。您可以修改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。

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

接著我們在hwslider.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保持一致，就實現了無縫滾動的效果。另外當滑動完成時，及時變換圓點切換的樣式。

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()函數，實現滑動動畫效果。

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()完成切換動畫。

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，滑鼠移開滑塊時又重新啟動定時器自動切換。

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); }); };

最後將代碼整理後，你將可以看到一個基本的滑動轉場效果，你也可以下載源碼測試。

為了讓我們的滑動轉場效果應用到移動端，我們在下一篇文章中會具體介紹移動端的自適應螢幕以及手勢滑動滑塊效果，敬請關注。

以上所述是小編給大家介紹的基於jQuery和hwSlider實現內容左右滑動轉場效果附源碼下載（一）的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！