網路上常看到展示一些商品，都是採用一個大突然後下面有幾張小圖，點了小圖就更換上面的大圖的效果，使用這種展示方式，不但可以把長長的頁面內容放在同一個區塊展示，也比較生動活潑，今天小編就來教大家如何自己使用這個方法，不過採用的不是jquery，而是另外一套一樣強大的mootools，不囉嗦先看DEMO。

 

點小圖看切換效果

使用方法：

一樣先載入需要的js檔，這邊載入的mootools版本為V1.3，不同版本可能有所不同請大家自己注意版本差異。

<script src="/js/mootools.js" type="text/javascript"></script>

之後將圖片的Html先寫好

<div id="bigphoto"> <img src="/image/01.JPG"/> </div> <div id="thumbphoto"> <img src="/image/01.JPG" /> <img src="/image/02.JPG" /> <img src="/image/03.JPG" /> </div>

＊其中大圖和縮圖外面分別使用id為bigphoto及thumbphoto的div包起來，這點很重要。

接下來當然要使用CSS修飾一下

#bigphoto img{     border:1px solid #000;
    width:400px;
    height:300px;
}
#thumbphoto{
    text-align:center;
    width:400px;
}
#thumbphoto img{
    border:1px solid #000;
    width:40px;
    height:30px;
    margin-top:5px;
}

最後就是最重要的script了

//定義clicktochange函數
var clicktochange = function() {
    //替縮圖增加Click事件
    $$('#thumbphoto img').addEvent('click', function(){
        //取得點擊縮圖的圖片位置
        var src= this.get('src');
        var bigpic =$$('#bigphoto img');
        bigpic.set("tween", {
            duration: 1000,//淡出的速度
            transition: Fx.Transitions.Quint.easeIn,//淡出的效果
            onComplete: function() {
                bigpic.set('src',src);//將大圖的圖片變更為縮圖的圖片
                bigpic.fade(1);//淡入
            }
        }).fade(0);
    });
};
//當頁面讀取完後執行clicktochange函數
window.addEvent('domready', function() {
    clicktochange();
});

都用完之後，就可以趕快看看效果囉，script裡面的各參數大家可以自行調整看看自己喜歡的效果是怎樣的。