基于jQuery和hwSlider實現(xiàn)內(nèi)容左右滑動切換效果附源碼下載(一)
內(nèi)容滑動切換應(yīng)用非常廣,常見的有幻燈片焦點圖、畫廊切換等。隨著WEB前端技術(shù)的廣泛應(yīng)用,內(nèi)容滑動切換效果占據(jù)著web頁面重要地位,因此本站Helloweba特別給廣大前端愛好者安排了淺顯易懂的內(nèi)容滑動切換效果的開發(fā)教程。
先給大家展示下效果圖,感覺還不錯請參數(shù)實現(xiàn)代碼,具體效果如下所示:
本次教程分三個部分:
1、使用jQuery開發(fā)基本的內(nèi)容滑動切換效果,
2、支持移動端觸控自適應(yīng)的內(nèi)容滑動切換效果,
3、封裝內(nèi)容滑動切換效果jQuery插件。
本文講解第一部分,后面兩部分會在接下來的文章中陸續(xù)發(fā)布,敬請關(guān)注。
本文將結(jié)合實例實現(xiàn)內(nèi)容滑動切換的基本效果,包括:
左右箭頭切換
無限無縫滾動
圓點按鈕切換
動畫效果
自動切換
HTML
首先準(zhǔn)備HTML結(jié)構(gòu),整個滑動區(qū)域用#hwslider包裹,包括滑塊內(nèi)容,滑塊使用ul li組織內(nèi)容,滑塊內(nèi)容可以是圖片、文字等任意HTML內(nèi)容。#dots即圓點切換導(dǎo)航,由多個小圓點組成,對應(yīng)滑塊數(shù)量,一般位于滑動區(qū)域的下方。.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完成滑動區(qū)域各組件的布局,注意其中#hwslider需要設(shè)置position: relative以及寬度和高度,那么滑塊#hwslider ul li設(shè)置position:absolute,默認(rèn)只顯示.active的滑塊,超出尺寸部分將被隱藏。而圓點導(dǎo)航#dots和箭頭導(dǎo)航.arr都要設(shè)置position: absolute,箭頭導(dǎo)航默認(rèn)不顯示,當(dāng)鼠標(biāo)滑向滑塊區(qū)域時才顯示。再一個要注意的是#dots和.arr的z-index設(shè)置成2,即都應(yīng)該顯示在滑塊上面。您可以修改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來實現(xiàn)滑動切換的各種效果,首先我們引入百度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中預(yù)先定義變量參數(shù):
$(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; //滑塊的總個數(shù) var index = 1; //初始顯示第一個滑塊 var speed = 400; //滑動速度 var interval = 3000; //間隔時間 var autoPlay = false; //是否支持自動滑動 var clickable = true; //是否已經(jīng)點擊了滑塊在做滑動動畫 });
以上定義了各種需要的變量,其中clickable用于限制點擊滑塊動畫,因為滑塊滑動過程需要時間完成,如果連續(xù)點擊箭頭的話,正常情況如果不限制點擊,則會在滑動動畫未完成的情況下又進(jìn)行下一個滑動動畫,這樣可能會導(dǎo)致頁面卡住的情況。
接下來我們來寫移動動畫函數(shù)moveTo()。接受兩個參數(shù),index即要滑動的目標(biāo)滑塊,dir是滑動方向,有next和prev。我們實現(xiàn)滑動動畫的原理是,當(dāng)前滑塊向左或向右移動的距離剛好是滑塊的寬度,我們把這個寬度看作可視區(qū),滑動時,當(dāng)前滑塊會向左或向右移出可視區(qū),而緊接著下一個滑塊從左或從右側(cè)進(jìn)入可視區(qū)。我們使用jQuery的animate()方法實現(xiàn)動畫效果,兩個滑塊的運動速度speed保持一致,就實現(xiàn)了無縫滾動的效果。另外當(dāng)滑動完成時,及時變換圓點切換的樣式。
var moveTo = function(index,dir){ if(clickable){ clickable = false; //位移距離 var offset = slider.width(); if(dir == 'prev'){ offset = -1*offset; } //當(dāng)前滑塊動畫 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; } }
綁定左右箭頭的點擊事件,當(dāng)點擊箭頭時,判斷當(dāng)前滑塊是否是第一個滑塊或最后一個滑塊,并重新定義index,從而實現(xiàn)無線滾動效果,然后分別調(diào)用moveTo()函數(shù),實現(xiàn)滑動動畫效果。
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'); } });
接著,綁定圓點導(dǎo)航的點擊事件,當(dāng)點擊小圓點時,獲取當(dāng)前點擊的圓點序號,即點擊的是第幾個圓點,就對應(yīng)的第幾個滑塊,然后調(diào)用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執(zhí)行play(),play()每執(zhí)行一次就會變化index參數(shù),調(diào)用moveTo實現(xiàn)切換效果。最后當(dāng)鼠標(biāo)滑上滑塊時清除定時器timer,鼠標(biāo)移開滑塊時又重新啟動定時器自動切換。
if(autoPlay){ var timer; var play = function(){ index++; if(index > hwsliderSize){ index = 1; } moveTo(index, 'next'); } timer = setInterval(play, interval); //設(shè)置定時器 //鼠標(biāo)滑上時暫停 slider.hover(function() { timer = clearInterval(timer); }, function() { timer = setInterval(play, interval); }); };
最后將代碼整理后,你將可以看到一個基本的滑動切換效果,你也可以下載源碼測試。
為了讓我們的滑動切換效果應(yīng)用到移動端,我們在下一篇文章中會具體介紹移動端的自適應(yīng)屏幕以及手勢滑動滑塊效果,敬請關(guān)注。
以上所述是小編給大家介紹的基于jQuery和hwSlider實現(xiàn)內(nèi)容左右滑動切換效果附源碼下載(一)的相關(guān)知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery基礎(chǔ)知識filter()和find()實例說明
這是jQuery里常用的2個方法。他們2者功能是完全不同的,而初學(xué)者往往會被誤導(dǎo)。2010-07-07使用Jquery搭建最佳用戶體驗的登錄頁面之記住密碼自動登錄功能(含后臺代碼)
今天將登錄功能徹底完成,加入記住密碼自動登錄功能,密碼在客戶端進(jìn)行第一次加密存儲。并修改了一些bug,優(yōu)化js代碼,上一版本太亂了。2011-07-07JQuery中綁定事件(bind())和移除事件(unbind())
本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享,這里推薦給有需要的小伙伴們參考下。2015-02-02jQuery實現(xiàn)的自適應(yīng)焦點圖效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的自適應(yīng)焦點圖效果,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08Enter回車切換輸入焦點實現(xiàn)思路與代碼兼容各大瀏覽器
這篇文章主要介紹了Enter回車切換輸入焦點實現(xiàn)思路與代碼并兼容各大瀏覽器,需要的朋友可以參考下2014-09-09