[jQuery]利用animate來製作左右移動圖片展示器

這個範例應該有很多人做過了，十分實用，如果把圖片縮小些，然後再加上燈箱的效果，應該可以拿來當展示產品或是照片等資訊，這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播來做修改的。

jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback])

想法，外層利用一個Div框住要製作動畫的內容，設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel，如此可以把元件浮在最外層Div框的相對位置。

需要二個按鈕，浮在左邊及右邊，設定動作向左移及向右移。

畫面如下：範例網址

img元件設定title屬性的話，那文字會顯示在圖片下方一條bar上

按左邊按鈕，會向左移動；按右邊按鈕，會向右邊移動

JavaScript部份

jQuery( function() {
        
        var $block = jQuery('#abgneBlock'), $slides = jQuery('#player ul.list',
                $block), _height = $slides.find('li').height(), _width = $slides
                .find('li div').width(), $li = jQuery('li', $slides), _animateSpeed = 1000, timer, _speed = 3000;
        //設定要被移動的Div寬度,每個li的寬度*個數
        jQuery('#abgneBlock #player').width(_width * $li.length);

        //如果img元素有設定title,則把title append在圖片上浮著
        $li.each( function(i) {
            jQuery("<div class='text'></div>").html(
                    jQuery(this).find("img").attr("title")).appendTo(
                    jQuery(this).find("div.content"));
        });
        var idx = 0;
        //左移按鈕
        jQuery("<img src='left.png' class='left'  />").css('top',
                (_height / 2 - 7) + 'px').click( function() {
            var $this = jQuery(this);
            /*右邊已無元素可以移動時不作動作*/
            if (idx > -($li.length - 1)){
                idx--;
               }
            $slides.stop().animate( {
                
                    left : _width * idx
                }, _animateSpeed, function() {
                    
                });

            return false;
        }).appendTo($slides.parent());

        //右移按鈕
        jQuery("<img src='right.png' class='right'  />").css( {
            "left" : _width - 30 + 'px',
            'top' : (_height / 2 - 7) + 'px'
        }).click( function() {
            var $this = jQuery(this);
            /*左邊已無元素可以移動時不作動作*/

            if (idx < 0){
                idx++;
               }
            $slides.stop().animate( {
                
                    left : _width * idx
                }, _animateSpeed, function() {
 
                });

            return false;

        }).appendTo($slides.parent());

    });

CSS部份

#abgneBlock {
    width: 620px;
    height: 422px;
    overflow: hidden;
}

#abgneBlock #player {
    position: relative;
    overflow: hidden;
    height: 100%;
}

#abgneBlock ul.list {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
}

#abgneBlock ul.list li {
    float: left;
    display: inline;
    height: 422px;
    width: 620px;
}

#abgneBlock ul.list div.content {
    clear: both;
    position: relative;
    height: 100%;
}

#abgneBlock ul.list div.content div.text {
    position: absolute;
    bottom: 23px;
    width: 100%;
    /*display:inline;*/
    left: 0px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #ffffff;
    font-weight: blod;
    color: #666666;
}

#abgneBlock .list img {
    padding: 10px 10px 10px 10px;
    border: 0;
    position: absolute;
}

#abgneBlock img.left {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 10px;
    cursor: pointer;
}

#abgneBlock img.right {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    /*right:0px;*/
    cursor: pointer;
}

#abgneBlock ul.playerControl {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 5px;
    /*right: 5px;*/
    height: 20px;
}

#abgneBlock ul.playerControl li {
    float: left;
    color: #ff99cc;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    font-family: Arial;
    font-size: 12px;
    cursor: pointer;
    margin: 0px 2px;
    background: url(images/control_ico.gif) no-repeat -21px 0;
}

#abgneBlock ul.playerControl li.current {
    color: #fff;
    font-weight: bold;
    background-position: 0 0;
}

#abgneBlock ul li div div.content {
    float: left;
    width: 200px;
    height: 200px;
}

html設計

<div id="abgneBlock">



<div id="player">



<ul class="list">

    <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>



</div>



</div>