【原創】商品詳情圖切換 / 縮略圖組左右按鈕

  寫在前面的話： 

網上這種插件不少，可是自己簡單的東西，我並不但願導入不少文件到頁面中，因此本身寫一個，代碼少，還維護方便。

 首先見效果圖：

js以下

  思路：

1. 首先實現點擊每一個縮略圖切換大圖；
2. 而後，設定每次移動的步長，取到當前的left值，而後加或者減，並以jquery的animate動畫移動。
3. 超出範圍作判斷。
4. var animateAble = true;  //給一個開關，不然後面有快速點擊一直移動的BUG

$(function(){

    //【商品圖片切換展現】

    //切換圖
    var get_div=$(".otoc-thum-img > div");
    get_div.click(function(){
        $(this).addClass("selected").siblings().removeClass("selected");
        var index = get_div.index(this);
        $(".otoc-details-img > img").eq(index).show().siblings().hide();
    })
    var animateAble = true;  //給一個開關，不然後面有快速點擊一直移動的BUG
    //縮略圖組移動
    $(".next").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //獲取當前位置
        var go_left = current_left-80
        if (current_left < -45 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });

    $(".pre").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //獲取當前位置
        var go_left = current_left+80
        if (current_left >= 6 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });
})

以上js裏有要注意一個函數，parseInt.  ---------parseInt() 函數可解析一個字符串，並返回一個整數。

詳見：http://www.w3school.com.cn/jsref/jsref_parseInt.asp

  爲何要用這個函數？請看以下圖：

直接取這個縮略圖組的left，返回的帶px的一個字符串，用 typeof 測試後，返回的是string。

而我是但願拿到數值型，因此如此。

  html以下：

<div class="box">
	<div class="otoc-details-img">  <!--大圖-->
   		<img src="img/details-big-1.jpg"/>
   		<img src="img/details-big-2.jpg"/>
       	<img src="img/details-big-3.jpg"/>
   		<img src="img/details-big-4.jpg"/>
   		<img src="img/details-big-5.jpg"/>
    </div>
    <div class="otoc-thum-wrap"> <!--這個是縮略圖容器，須要定義overflow：hidden；-->
    	<div class="otoc-thum-img"> <!--按鈕組-->
           	<div class="selected">
           		<img src="img/details-big-1.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-2.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-3.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-4.jpg" />
           	</div>
           	<div class="">
           		<img src="img/details-big-5.jpg" />
           	</div>
  		</div>
    </div>
    <div class="otoc-thum-btn"> <!--左右按鈕-->
    	<div class="pre">
    		<i class="fa fa-angle-left"></i>
    	</div>
		<div class="next">
			<i class="fa fa-angle-right"></i>
		</div>
    </div>
</div>
<!-- 產品tab切換圖 結束 -->

  less以下：

/*外容器*/
.otoc-thum-wrap{ 
    position: relative; 
    margin-top: 15px;  
    width: 100%; 
    height: 80px; 
    overflow:hidden; 
    border-radius:5px ;
    border: 1px solid @otoc-border-color-1level;
}

/*大圖*/
.otoc-details-img{
    padding-top:8px;
    img:nth-child(2),img:nth-child(3),img:nth-child(4),img:nth-child(5){ display: none;}
    > img{ width: 260px; height: 260px;}
}

/*縮略圖*/
.otoc-thum-img{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    padding: 10px 15px; 
    width: 340px; 
    height: 60px; 
    border: 1px solid #fff; 
    z-index: 999;
        div{ 
            float: left; 
            margin-left: 1.3px;
            img{ 
                width: 58.3px; 
                height: 58px; 
                border: 2px solid #fff; 
                cursor: pointer;
                }
            
        }
        div.selected img { border: 2px solid #333; }
}

/*按鈕*/
.otoc-thum-btn{ 
    overflow:visible;
        > div{ 
            position: absolute; 
            cursor: pointer; 
            z-index: 999; 
            bottom:47px; 
            width: 20px; 
            height: 20px; 
            font-size: 24px;
            text-align: center; 
            line-height: 20px; 
            border-radius:20px; 
            color: #00343B; 
            transition: all 0.3s;
            &:hover{ color: #36c6d3; transform: scale(1.2);};
            &:active{ transform: translate(2px,1px);}
        }
        > div.pre{ position: absolute; left: 1px; }
        > div.next{ position: absolute;  right:1px; }
    }

  js 完善版本（解決了以前會快速點擊後-縮略圖會一直左移或者右移的BUG，孫版本）

$(function(){

    //【商品圖片切換展現】

    //切換圖
    var get_div=$(".otoc-thum-img > div");
    get_div.click(function(){
        $(this).addClass("selected").siblings().removeClass("selected");
        var index = get_div.index(this);
        $(".otoc-details-img > img").eq(index).show().siblings().hide();
    })
    var animateAble = true;
    //縮略圖組移動
    $(".next").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //獲取當前位置
        var go_left = current_left-80
        if (current_left < -45 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });

    $(".pre").click(function(){
        var current_left = parseInt($(".otoc-thum-img").css("left")) //獲取當前位置
        var go_left = current_left+80
        if (current_left >= 6 || !animateAble)
        {
            return false;
        }
        else
        {
            animateAble = false;
            $(".otoc-thum-img").animate({ left: go_left + "px" }, 200, function () {
                animateAble = true;
            });
        }
    });
})