Question

我为项目写了一个滑动列表。这里是： http://study-wise.appspot.com/test/left_right.html

我一直在想，有没有更好的方法呢？就像内置于jquery-ui的东西一样谢谢我想知道学习目的，如果没有，我想在某处发布，以便可以使用。

<html>
    <head>
        <title>
            test
        </title>

CSS

        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            a.move {
                z-index: 2;
                position: absolute;
                height: 28px;
                width: 28px;
                display: inline-block;
                border: 1px #aaa solid;
                border-radius: 5px;
                background-color: white;
                text-align: center;
                text-decoration:  none;
                color: black;
            }
            a.move:hover {
                background-color: #aaa;
            }
            a.move.left {
                top: 0;
                left: 0;
            }
            a.move.right {
                top: 0;
                left: 370px;
            }
            ul#shifting li {
                display: inline-block;
                height: 30px;
                width: 335px;
                border-right: 1px #aaa solid;
                margin-left: 35px;
            }

            div.slidingList_outer{
                z-index: 1;
                position: relative;
                width: 741px;
                height: 30px;
                border: 4px #24a solid;
                overflow: hidden;
            }
            div.slidingList_inner{
                position: relative;
                width: 1200px;
                height: 30px;
            }

        </style>

JQUERY

        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            var current = 0;
            var total = 0;
            var wait = 0;
            var width = 335;
            var margin = 35;
            function next(){
                if(wait || current == total - 1) return;
                wait=1;
                $('li:eq(' + (current + 2) + ')').show();
                $('li:eq(' + (current + 0) + ')').animate({
                    marginLeft: "-" + (width) + "px"
                  }, 1000, function(){update(+1);});
            }
            function prev(){
                if(wait || current == 0) return;
                wait=1;
                $('li:eq(' + (current - 1) + ')').css({marginLeft: "-" + (width) + "px"}).show().animate({
                    marginLeft: "" + (margin) + "px"
                  }, 1000, function(){update(-1);});
            }
            function update(delta){
                if(delta == 1){
                    $('li:eq(' + (current + 0) + ')').hide();
                    $('li:eq(' + (current + 0) + ')').css({marginLeft: "" + (margin) + "px"});
                } else if(delta == -1){
                    $('li:eq(' + (current + 1) + ')').hide();
                }
                current+=delta;
                wait=0;
                $('p').text('current: ' + current);
            }
            function init(){
                total = $('li').size();
                $('ul').append('<li>End of lecture</li>');
                $('li').hide();
                $('li:eq(' + (current + 0) + ')').show();
                $('li:eq(' + (current + 1) + ')').show();
            }
            $(function(){
                init();
                /*bind events*/
                $('a.move.left').click(function(e){
                    e.preventDefault();
                    prev();
                });
                $('a.move.right').click(function(e){

                    e.preventDefault();
                    next();
                });
            });
        </script>
    </head>

HTML

    <body>
        <p> ... </p>
        <div class="slidingList_outer">
            <div class="slidingList_inner">
                <a class="move left" href="a">&lt;</a><a class="move right" href="b">&gt;</a>
                <ul id="shifting">
                    <li>123</li><!--
                    --><li>456</li><!--
                    --><li>789</li><!--
                    --><li>abc</li><!--

                    --><li>edf</li><!--
                    --><li>ghj</li><!--
                    --><li>!@#</li><!--
                    --><li>$%^</li><!--
                    --><li>ABC</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Answer 1

如果符合您的要求，我建议jQuery Tools Scrollable。

jquery滑动列表 - 创建一个的最佳方法？

1 个答案: