上下滚动的jQuery图片展示
2012-7-19 17:56 Thursday  

分类: Javascript 标签: li border width height images 评论(10) 浏览(30381)

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            无标题文档
        </title>
    </head>
    <script src="../jquery-1.4.2.js" type="text/javascript">
    </script>
    /** 注意红色的代码,这些属性是关键,overflow:hidden把超出的部分隐藏; 由于jQuery中我用的是animate()方法,该方法必须在设置了position后才可以生效。因为div的position默认的属性是static,固定的,不可以移动。
    以下是jQuery代码: **/
    <script type="text/javascript">
        $(function() {
            var page = 1;
            var i = 3;
            var conheight = $('.con').height();
            var lilen = $('li').length;
            var len = Math.ceil(lilen / i);
            $('.next').click(function() {
                if (page == len) {

                    $('.con_list').animate({
                        top: 0
                    },
                    'slow');
                    page = 1;
                } else {
                    $('.con_list').animate({
                        top: '-=' + conheight
                    },
                    'slow');
                    page++;
                }
            });
            $('.prev').click(function() {
                if (page == 1) {
                    $('.con_list').animate({
                        top: '-=' + conheight * (len - 1)
                    },
                    'slow');
                    page = len;
                } else {
                    $('.con_list').animate({
                        top: '+=' + conheight
                    },
                    'slow');
                    page--;
                }
            });
        })
    </script>
    <style type="text/css">
        body,ul,li { margin:0; padding:0; list-style:none outside none; } .prev,
        .next { width:95px; height:22px; cursor:pointer; margin-left:5px; } .prev
        { background:url(images/imgbut.gif) no-repeat scroll left top; } .next
        { background:url(images/imgbut.gif) no-repeat scroll left top; background-position:0
        -22px; } .con { width:105px; height:244px; overflow:hidden; position:relative
        } .con_list { position:relative } .con li { background:url(images/list_imgBg.jpg)
        no-repeat scroll left top; height:68px; padding:5px 7px; width:89px; margin:3px
        0px; }
    </style>
   
    <body>
        <div class="prev">
        </div>
        <div class="con">
            <div class="con_list">
                <ul>
                    <li>
                        <img src="images/1.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/2.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/3.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/1.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/2.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/3.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/1.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/2.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/3.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                    <li>
                        <img src="images/1.jpg" width="89" height="63" alt="" border="0" />
                    </li>
                </ul>
            </div>
        </div>
        <div class="next">
        </div>
    </body>

</html>
+1 4

留下你的看法: