原生js實現淘寶圖片切換

這個淘寶圖片切換具體效果就是：鼠標移上底部一行中的小圖片，上面大圖片區域就會顯示對應的圖片。

gif圖片看起來還挺酷的，其實實現很簡單，用原生js綁定事件改變大圖片區域的src。

上代碼，html部分的代碼：

<div class="picture-big"><img src="img/02big.jpg" width="360" height="360" id="pic" /></div>
    <div class="picture-small">
        <ul>
            <li id="li01"><img src="img/01.jpg" width="70" height="70" /></li>
            <li id="li02"><img src="img/02.jpg" width="70" height="70" /></li>
            <li id="li03"><img src="img/03.jpg" width="70" height="70" /></li>
            <li id="li04"><img src="img/04.jpg" width="70" height="70" /></li>
            <li id="li05"><img src="img/05.jpg" width="70" height="70" /></li>
        </ul>
    </div>

javascript部分的代碼：

<script type="text/javascript">

function show(canshu1,canshu2){    
    var li01 = document.getElementById(canshu1)  //參數1為小圖片的id,參數2為大圖片的src
    var pic = document.getElementById('pic')    // pic為大圖片div的id
    
    li01.onmouseover = function(){
        pic.src = canshu2                        // 把參數2設為新的src(路徑)
    }
}    

show("li01","img/01big.jpg")    //調用show()，用所有大小圖片參數
show("li02","img/02big.jpg")    
show("li03","img/03big.jpg")    
show("li04","img/04big.jpg")    
show("li05","img/05big.jpg")    
    

</script>

簡單粗暴，就這么幾行原生js寫的show()，實現這樣的圖片切換。