|
選項(xiàng)卡五花八門(mén),，今天又要用到選項(xiàng)卡,，首選swiper！ 一,、HTML布局根據(jù)swiper官網(wǎng)的要求來(lái)class命名滑塊,。 <div class='box'> <ul class='swiperTab'> <li> <span>Div+CSS</span> </li> <li> <span>JavaScript+JQuery</span> </li> <li> <span>AngularJS+Vue+NodeJs</span> </li> </ul> <div class='swiper-container'> <div class='swiper-wrapper'> <div class='swiper-slide'>千尋Div+CSS</div> <div class='swiper-slide'>阿飛JavaScript+JQuery</div> <div class='swiper-slide'>無(wú)慮AngularJS+Vue+NodeJs</div> </div> </div></div>二、CSS樣式隨便寫(xiě)寫(xiě),，根據(jù)使用場(chǎng)景調(diào)整,。（PS：推薦一個(gè)在線美化工具） 三、Js封裝自己封裝的選項(xiàng)卡函數(shù)swiperTab.js /* swiper 選項(xiàng)卡函數(shù) 參數(shù)說(shuō)明* obj 必選,，導(dǎo)航列表* swiperObj: 必選,，HTML元素或者string類型，Swiper容器的css選擇器* className: 必選,，當(dāng)前樣式的類名* effect：可選,，切換效果，默認(rèn)為'slide',，可設(shè)置為'fade,，cube，coverflow,，flip',。* 其他參數(shù)參閱官網(wǎng) http://www.* */function tabs(obj,swiperObj,className) { var tabSwiper = new Swiper(swiperObj, { effect : 'flip',//切換效果 speed : 500, //滑動(dòng)速度，單位ms autoHeight: true, // 高度隨內(nèi)容變化 onSlideChangeStart : function() { $(obj+'.'+className).removeClass(className); /*有當(dāng)前類名的刪除類名,給下一個(gè)添加當(dāng)前類名*/ $(obj).eq(tabSwiper.activeIndex).addClass(className);/*activeIndex是過(guò)渡后的slide索引*/ } }); // 模擬點(diǎn)擊事件,，如果是移入事件,，將mousedown 改為 mouseenter $(obj).on('touchstart mousedown', function(e) { e.preventDefault();/*清除默認(rèn)事件*/ $(obj+'.'+className).removeClass(className); $(this).addClass(className); /*點(diǎn)擊當(dāng)前導(dǎo)航 改變當(dāng)前樣式*/ tabSwiper.slideTo($(this).index());/*滑動(dòng)到對(duì)應(yīng)的滑塊*/ }); $(obj).click(function(e) { e.preventDefault();/*清除默認(rèn)點(diǎn)擊事件*/ });}四、Js調(diào)用首先引入相關(guān)js |
|
|
來(lái)自： 黃三歲大愛(ài)人生 > 《網(wǎng)頁(yè)》
