国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

網(wǎng)站前端制作之tab+swiper的兩種切換

發(fā)表日期:2021-07-15 19:09:36   作者來源:方維網(wǎng)絡(luò)   瀏覽:3752   標(biāo)簽:網(wǎng)站前端制作    
關(guān)于頁面中常用的效果,tab+swiper的切換很常見,多見于兩種情況,一種是li切換swiper的slide,一種是li切換swiper。當(dāng)tabs的li切換swiper的slide,效果如下圖所示:

前端制作效果


Html:
<div class="tabs wow fadeInUp">
<ul class="clearfix">
<li class="active">
<a href="javascript:;">
辦公環(huán)境
</a>
</li>
<li>
<a href="javascript:;">
實(shí)驗(yàn)大樓
</a>
</li>
<li>
<a href="javascript:;">
生產(chǎn)基地
</a>
</li>
</ul>
</div>
 
<div class="tabbox wow fadeInUp">
<div class="swiper-box">
<div class="swiper-wrapper">
            <div class="swiper-slide stop-swiping">
             辦公環(huán)境
            </div>
            <div class="swiper-slide stop-swiping">
             實(shí)驗(yàn)大樓             </div>
            <div class="swiper-slide stop-swiping">
             生產(chǎn)基地
            </div>
       </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- Add Arrows -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
</div>
 
 
JS:
var swiper = new Swiper('.swiper-box', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        grabCursor: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        noSwiping : true,
        noSwipingClass : 'stop-swiping',
        autoHeight: true,
        observer: true,
observeParents: true,
onSlideChangeStart: function(swiper){
var i = swiper.activeIndex;
$(".tabs ul li").eq(i).addClass("active").siblings().removeClass("active");
},
    });
$('.tabs ul li').click(function(){
var index = $(this).index();
$(this).addClass('active').siblings('li').removeClass('active');
swiper.slideTo($(this).index(), 500, false);
swiper.update();
});
先引入jquery插件和swiper.min.js和swiper.min.css文件,定義swiper的大小,初始化Swiper, tabs的li設(shè)置一個(gè)默認(rèn)的選中效果active,對應(yīng)swiper的一個(gè)swiper-slide,點(diǎn)擊tabs的li時(shí),當(dāng)前點(diǎn)擊的li添加默認(rèn)的選中效果類名為active,其他的同級li移除active, 在獲取當(dāng)前點(diǎn)擊的li標(biāo)簽的下標(biāo)$(this).index(),執(zhí)行過渡到索引下標(biāo)數(shù)字等于傳入?yún)?shù)index的頁面(slide)處,速度為500。并且可以將runCallbacks設(shè)置為false,原來是默認(rèn)為true,那么transition(過渡)不會產(chǎn)生onSlideChange回調(diào)函數(shù)。那么,就可以做到點(diǎn)擊tabs的li能切換對應(yīng)的swiper-slide,滑動swiper-slide也能切換li的默認(rèn)選中效果類名active。
 
 
當(dāng)tabs的li切換swiper時(shí),如下圖所示:

前端效果

Html:

HTML

Js:

CSS

關(guān)于兩個(gè)swiper輪播切換,一個(gè)顯示,一個(gè)隱藏的,需要注意的是如果用display: none;和display:block; swiper的自動切換,點(diǎn)擊li切換swiper之后,自動輪播會出錯(cuò),那么可以用以下的css代替display: none;和display:block; 這樣做的話,tab swiper切換后自動輪播也不會出錯(cuò)了。
Css:

CSS2

如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://pdcharm.com/news/6134.html
库车县| 梨树县| 彭阳县| 突泉县| 定州市| 察雅县| 阿拉善左旗| 宜川县| 仙居县| 千阳县| 翁牛特旗| 台东县| 泰顺县| 洛川县| 镇安县| 治多县| 乐平市| 平武县| 黄冈市| 东安县| 普宁市| 平昌县| 郓城县| 洞口县| 大理市| 抚州市| 永平县| 东宁县| 罗平县| 开化县| 那曲县| 凌源市| 汕尾市| 绿春县| 东港市| 松潘县| 深水埗区| 铜山县| 城固县| 交口县| 泉州市|