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

全部的原始碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>Test</title>

<script type="text/javascript"
    src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
    
</script>

<style type="text/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 {
    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 #player div.topPlayer {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
}

#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;
}
</style>
<script type="text/javascript">
    jQuery.noConflict();

    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;
        jQuery('#abgneBlock #player').width(
                _width * $li.length / $slides.length);

        var _str = '';
        //取得所列數,並把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;
                        });
        //以下與前一範例相同
        $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;
        var topidx = 0;
        var leftbt = jQuery("<img src='left.png' class='left'  />").css('top',
                (_height / 2 - 7) + 'px').click( function() {
            var $this = jQuery(this);
            if (idx > -($li.length / $slides.length - 1))
                idx--;
            $slides.filter(':eq(' + topidx + ')').stop().animate( {
                left : _width * idx
            }, _animateSpeed, function() {

            });

            return false;
        }).appendTo($slides.parent().parent());
        var rightbt = 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.filter(':eq(' + topidx + ')').stop().animate( {
                left : _width * idx
            }, _animateSpeed, function() {

            });

            return false;

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

    });
</script>
</head>
<body style="padding-left: 50px">
<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>
</body>
</html>
Pages: 1 2
發表迴響取消回覆
