[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">
#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;
}

div.growlUI {
    background: url(check48.png) no-repeat 10px 10px
}

div.growlUI h1,div.growlUI h2 {
    color: white;
    padding: 5px 5px 5px 75px;
    text-align: left
}
</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;
        //設定要被移動的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());

    });
</script>
</head>
<body style="padding-left: 50px">
<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>
</body>
</html>
範例網址
Pages: 1 2
[jQuery]利用animate來製作左右移動圖片展示器

2 thoughts to “[jQuery]利用animate來製作左右移動圖片展示器”

發表迴響取消回覆
