【Little Demo】左右按鈕tab選項卡雙切換

通過前一篇文章 從簡單的Tab標簽到Tab圖片切換 的說明，相關效果也就可以實現了。

 

1.左右按鈕tab選項卡雙切換

很明顯，左右兩個按鈕是 absolute 布局，另外就是內容部分和Tab標簽部分。

1) 先實現Tab內容和標簽部分的顯示：

HTML代碼：

<div class="tab-Infomations">
    <div class="arrows"></div>
    <div class="tab-content">
        <div class="tab-info">
            <div class="info info1">
                <p>
                    We provide a full spectrum of online advertising...
                    <br />
                    <a href="#" class="GlobalButton"><span>Tour Our Services</span></a>
                </p>
            </div>
            <div class="info info2 hidden">...</div>
            <div class="info info3 hidden">... </div>
            <div class="info info4 hidden">... </div>
        </div>
        <div class="tab-thumbs">
            <ul>
                <li class="selected"><a href="javascript:;">What We Do</a></li>
                <li><a href="javascript:;">Who We Are</a></li>
                <li><a href="javascript:;">Why Choose Us</a></li>
                <li><a href="javascript:;">How We Work</a></li>
            </ul>
        </div>
    </div>
</div>

CSS代碼:

body, ul, li { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; }
ul, ol,li { list-style: none; }
a { text-decoration: none;}
.hidden {display: none;}
/*----------   tab ------------*/
.tab-Infomations {position: relative;width: 959px;margin: 10px auto;}
.tab-content  {width:912px;height:324px;background: url("../imgs/tab-for-infomation/slidebg.jpg")  no-repeat;
   overflow: hidden;margin: 0 auto;}
/*----------   tab-thumbs ------------*/
.tab-thumbs{ position: absolute;bottom: 0;}
.tab-thumbs li { float: left;width: 228px;height: 50px;}
.tab-thumbs li a { width: 228px;height: 50px;display: block;color: #ffffff;font-size: 18px;font-family: Arial,sans-serif;line-height: 50px;text-align: center; }
.tab-thumbs li.selected a{ cursor: default;text-shadow: 1px 1px 1px #374f10;}
/*----------   tab-info ------------*/
.tab-info { width:912px;height:324px;}
.info {width: 912px;height: 324px;position: absolute;}
.info p{ color:#1d1d1d;font-size: 12px;line-height: 20px;margin-left: 326px;margin-top: 142px;width: 542px; }
.info1 { background: url("../imgs/tab-for-infomation/billboard1.png") no-repeat; }
.info2 { background: url("../imgs/tab-for-infomation/billboard2.png") no-repeat; }
.info3 { background: url("../imgs/tab-for-infomation/billboard3.png") no-repeat; }
.info4 { background: url("../imgs/tab-for-infomation/billboard4.png") no-repeat; }
.GlobalButton {background: url("../imgs/tab-for-infomation/btn_right.png") no-repeat  top right;display: block;float: left;font-weight: bold;height: 31px;margin-top: 20px;padding-right: 20px;}
.GlobalButton span { background: transparent url("../imgs/tab-for-infomation/btn_left.png") no-repeat 0 0;line-height: 18px;line-height: 18px;padding: 7px 0 6px 20px;color: #252525;display: block;}
/*----------   tab-info ------------*/
.arrows { position: absolute;}

效果：

 

2) 然后我們把兩邊的按鈕加上

這里稍微調整下HTML：

<div class="tab-Infomations">
 <div class="arrows">
 <a class="arrows-left prev"></a> <a class="arrows-right next"></a> </div> <div class="tab-border">
        <div class="tab-content">
            ...
        </div>
    </div>
</div>

然后是CSS代碼：

.tab-border { border: 1px solid #cccccc;margin: 0 auto;padding:3px;width: 912px;}
/*----------   tab-arrows ------------*/
.arrows a { display: block;height: 41px;width:41px;top: 143px;z-index: 10;position: absolute;cursor: pointer;}
.arrows-left {background: url("../imgs/tab-for-infomation/arrows.png") no-repeat  0 0;left: 0;}
.arrows-right {background: url("../imgs/tab-for-infomation/arrows.png") no-repeat  -41px 0px;right: 0;}
.arrows-left:hover,.arrows-right:hover {background-position-y: -41px;}

顯示效果如下：

 

3) 然后就是添加jQuery方法 

$(document).ready(function () {
    var mIndex = 0;
    var maxIndex = $(".tab-thumbs li").length-1;
    $(".tab-thumbs li").click(function () {
        var mIndex = $(this).index();
        changeTab(mIndex);
    });
    $(".arrows-right").click(function () {
        if(mIndex<maxIndex){
            mIndex++;
        }else {
            mIndex = 0;
        }
        changeTab(mIndex);
    });
    $(".arrows-left").click(function () {
        if(mIndex>0){
            mIndex--;
        }else {
            mIndex = maxIndex;
        }
        changeTab(mIndex);
    });
})
function changeTab(theIndex) {
    $(".tab-thumbs li").removeClass("selected");
    $(".tab-thumbs li").eq(theIndex).addClass("selected")
    $(".info").stop();
    $(".info").fadeOut();
    $(".info").eq(theIndex).fadeIn();
}

 

源碼見 tab-for-infomation.html || tab-for-infomation.js || tab-for-infomation.css

 

2.左右滾動效果

前面是用的淡入淡出的效果，但是一般來說還有左右滾動的效果。我們來實現看看：

為了和之前的對比，我們就不更改HTML 和CSS 文件中的代碼。但是滾動效果是通過設置偏移值 left 來進行滾動的，而這里的信息展示部分不僅僅是圖片，所以需要設置展示位的布局為相對布局，然后設置好展示位下的每個展示信息的left值，我們通過JS代碼來操作：

...
var maxIndex = $(".tab-thumbs li").length-1;
var imgWidth = $(".tab-info").eq(0).width();
// 為了對比，這里用JS 實現；實際上可以CSS直接添加的直接添加
$(".tab-thumbs").attr("z-index","10"); //保持Tab 按鈕在最上面
// 設置圖片的父元素為相對布局
$(".tab-info").css({"position":"relative","overflow":"hidden"});
// 去除隱藏類 hidden
$(".info").removeClass("hidden");
// 給每個類名為info 的元素設置左邊緣位置
for(var i=0;i<=maxIndex;i++){
    $(".info").eq(i).css({"left":imgWidth*i+"px"});
}
...

然后我們的切換效果函數也需要修改下：

function changeTab(theIndex) {
    var nowIndex = $(".selected").index();
    var leftNum = $(".tab-info").eq(0).width()*(nowIndex-theIndex);
    $(".tab-thumbs li").removeClass("selected");
    $(".tab-thumbs li").eq(theIndex).addClass("selected");
    $(".info").animate({left:"+="+leftNum }); //進行元素左移效果
}

這樣左右滾動的效果就實現了：

相關源碼：tab-for-infomation-scrolling.js

 

補充：

如果不想通過設置滾動模塊的偏移值 left 來進行滾動的話，可以通過設置其父元素的 margin-left 值的變換來實現滾動效果。

HTML代碼保持不變。但我們不能再讓滾動模塊絕對定位了，更改其 CSS樣式如下：

.info {width: 912px;height: 324px; float: left;position: static;}

然后更改JS控制其父元素 .tab-info 的 margin-left 值的變換。當 margin-left 為0，自然顯示第一個模塊；讓 margin-left 為負的模塊寬度時，顯示第二個模塊。以此類推。JS代碼如下：

$(document).ready(function () {
    var mIndex = 0;
    var maxIndex = $(".tab-thumbs li").length-1;
    var imgWidth = $(".info").eq(0).width();
    // 為了對比，這里用JS 實現；實際上可以CSS直接添加的直接添加
    $(".tab-thumbs").attr("z-index","10"); //保持Tab 按鈕在最上面
    // 設置圖片的父元素為相對布局
    $(".tab-info").css({"position":"relative","width":imgWidth*$(".tab-thumbs li").length+"px"});
    // 去除隱藏類 hidden
    $(".info").removeClass("hidden");
    $(".tab-thumbs li").click(function () {
         mIndex = $(this).index();
        changeTab(mIndex);
    });
    $(".arrows-right").click(function () {
        if(mIndex<maxIndex){
            mIndex++;
        }else {
            mIndex = 0;
        }
        changeTab(mIndex);
    });
    $(".arrows-left").click(function () {
        if(mIndex>0){
            mIndex--;
        }else {
            mIndex = maxIndex;
        }
        changeTab(mIndex);
    });
})

function changeTab(theIndex) {
    var imgWidth = $(".info").eq(0).width();
    var marginValue = "-"+theIndex*imgWidth+"px";
    $(".tab-thumbs li").removeClass("selected");
    $(".tab-thumbs li").eq(theIndex).addClass("selected");
    $(".tab-info").css({"margin-left":marginValue,"transition-property":"margin-left","transition-duration":"0.2s"}); //進行元素左移效果
}