[jQuery]照片展示animate左右及上下移動

在前一篇[jQuery]利用animate來製作左右移動圖片展示器有利用jQuery來製作Animate效果，來製作左右移動圖片的照片或產品展示器，不過就只能針對同種分類或同性資的照片來做效果，如果有多種分類照片或產品就需要再做一份一樣的內容，這裡提供一個解決的方案，再做一次Animate，不過這次是上下移動來選擇不同列的圖片（照片）資料。

不同分類的圖片，利用不同的ul來分開，然後在ul的前面再加上一個Div來做上下移動的框架，左右移動則是利用ul這個tag，當移動到那一列的框架，把index記錄起來，如此左移及右移按鈕才可針對目前列來做移動。

ul及img都有title這個屬性，所以利用此屬性來當上方分類名稱。

效果截圖如下：

按下左移或右移按鈕，可以使圖片向左或向右移動。

按下上方分頁按鈕，則會上或下移動到該列（分類）。

此時按左移或右移，只會針對此列（分類）來做圖片（照片）的移動。

CSS增加的部份如下：

#adbgenMenu {
    clear: both;
    height: 20px;
    width: 100%;
}

#adbgenMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#adbgenMenu ul li {
    float: left;
    margin-left: 10px;
    display: inline;
    cursor: pointer;
    text-align: center;
    width: 100px;
    height: 20px;
    overflow: hidden;
    background: url(bg.gif) no-repeat 0 0;
}

#adbgenMenu ul li.current {
    background-position: -100px 0;
}


#abgneBlock #player div.topPlayer {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
}

而javascript部份增加了上下移動id=topPlayer這個動作

        //取得所列數,並把ul的title檔標題顯示於id="adbgenMenu"的Div上
        $slides.each( function(i) {
            var myslide = jQuery(this);
            myslide.css('top', _height * myslide.index() + 'px');
            _str += "<li" + (i == 0 ? " class='current'" : "") + ">"
                    + myslide.attr("title") + "</li>";
        });
        //每列的標題,之範例是"第一頁","第二頁",所做的上下移動的動作
        jQuery("<ul></ul>").html(_str).appendTo("#adbgenMenu").find("li")
                .click(
                        function() {

                            var myplayerLi = jQuery(this);
                            topidx = myplayerLi.index();
                            myplayerLi.addClass('current').siblings('.current')
                                    .removeClass('current');

                            $slides.parent().stop().animate( {

                                top : _height * (jQuery(this).index() * -1)
                            }, _animateSpeed, function() {
                                idx = 0;
                                rightbt.click();

                            });

                            return false;
                        });

比較特別的是，這個範例只能把不同列的內容照片數量放一樣的，因為左右移動用的框被設定了overflow:hidden及width寬，如果某列（分類）的內容照片數量與其它列（分類）不一樣時，會出現跑出空白的問題，這其實應該不難解決，就留給有心的朋友吧！。

        jQuery('#abgneBlock #player').width(
                _width * $li.length / $slides.length);

Html的部份改成如下：

<div id="adbgenMenu"></div>
<div id="abgneBlock">
<div id="player"><!--另外加上的Div來做上下移動用的-->
<div class="topPlayer">

<ul class="list" title="第一頁">

    <li>
    <div class="content"><img src="1.jpg" title='台八線' /></div>
    </li>
    <li>
    <div class="content"><img src="2.jpg" title='崖上民宿(外觀)' /></div>
    </li>
    <li>
    <div class="content"><img src="3.jpg" title='雲山水' /></div>
    </li>
    <li>
    <div class="content"><img src="4.jpg" title='崖上民宿(夜間外觀)' /></div>
    </li>
    <li>
    <div class="content"><img src="5.jpg" title='太平洋日出' /></div>
    </li>
    <li>
    <div class="content"><img src="6.jpg" title='太平洋日出2' /></div>
    </li>

</ul>
<ul class="list" title="第二頁">

    <li>
    <div class="content"><img src="7.jpg" title='鴨子' /></div>
    </li>
    <li>
    <div class="content"><img src="8.jpg" title='九份' /></div>
    </li>
    <li>
    <div class="content"><img src="9.jpg" title='花' /></div>
    </li>
    <li>
    <div class="content"><img src="10.jpg" title='野柳' /></div>
    </li>
    <li>
    <div class="content"><img src="11.jpg" title='野柳2' /></div>
    </li>
    <li>
    <div class="content"><img src="12.jpg" title='白沙灣' /></div>
    </li>

</ul>
</div>

</div>



</div>

範例網址