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

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

jquery html css

jquery滑动列表-创建滑动列表的最佳方法？,jquery,html,css,Jquery,Html,Css,我为一个项目写了一个滑动列表。这是：我一直在想，有没有更好的办法？就像jqueryui内置的东西一样谢谢我想知道学习的目的，而且，如果没有，我想张贴在某个地方，以便它可以使用 <html> <head> <title> test </title> 测试 CSS *{ 边际：0px；填充：0px； } a、移动{ z指数：2；位置：绝对位置；高度：28px；

我为一个项目写了一个滑动列表。这是：

我一直在想，有没有更好的办法？就像jqueryui内置的东西一样谢谢我想知道学习的目的，而且，如果没有，我想张贴在某个地方，以便它可以使用

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


测试

CSS


*{
边际：0px；
填充：0px；
}
a、 移动{
z指数：2；
位置：绝对位置；
高度：28px；
宽度：28px；
显示：内联块；
边框：1px#aaa实心；
边界半径：5px；
背景色：白色；
文本对齐：居中；
文字装饰：无；
颜色：黑色；
}
a、 移动：悬停{
背景色：#aaa；
}
a、 向左走{
排名：0；
左：0；
}
a、 向右移动{
排名：0；
左：370px；
}
ul#移动李{
显示：内联块；
高度：30px；
宽度：335px；
右边框：1px#aaa实心；
左边距：35px；
}
分区滑动列表\u外部{
z指数：1；
位置：相对位置；
宽度：741px；
高度：30px；
边框：4px#24a实心；
溢出：隐藏；
}
分区滑动列表\u内部{
位置：相对位置；
宽度：1200px；
高度：30px；
}

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>


无功电流=0；
var合计=0；
var-wait=0；
var宽度=335；
var保证金=35；
函数next（）{
if（wait | | current==total-1）返回；
等待=1；
$（'li:eq（+（当前+2）+'））.show（）；
$（'li:eq（+（当前+0）+'）。设置动画({
边缘左侧：“-”+（宽度）+“px”
}，1000，函数（）{update（+1）；}）；
}
函数prev（）{
if（wait | | current==0）返回；
等待=1；
$（'li:eq（+（current-1）+'））.css（{marginLeft:“-”+（width）+“px”）.show（）.animate({
marginLeft:“+（边距）+”px”
}，1000，函数（）{update（-1）；}）；
}
函数更新（增量）{
如果（增量==1）{
$（'li:eq（+（当前+0）+'））.hide（）；
$（'li:eq（+（current+0）+'））.css（{marginLeft:+（margin）+“px}）；
}else if（delta==-1）{
$（'li:eq（+（当前+1）+'））.hide（）；
}
电流+=增量；
等待=0；
$（'p'）.text（'current:'+current）；
}
函数init（）{
总计=$（'li'）.size（）；
$（'ul'）。追加（'li>讲座结束'）；
$（'li'）.hide（）；
$（'li:eq（+（当前+0）+'））.show（）；
$（'li:eq（+（当前+1）+'））.show（）；
}
$（函数（）{
init（）；
/*绑定事件*/
$（'a.move.left'）。单击（函数（e）{
e、 预防默认值（）；
prev（）；
});
$（'a.move.right'）。单击（函数（e）{
e、 预防默认值（）；
next（）；
});
});

HTML




123
456
789
abcedf
ghj
@#
$%^
ABC

我建议它是否符合您的要求。

也许这是一个适合codereview.stackexchange.com的问题？我想。。我对创建它的其他方式更感兴趣，比如如何创建相同的东西，而不是对我的代码进行注释。。我将重新表述这个问题……同意F.卡尔德兰的观点……顺便说一句，总有更好的编码方式，这取决于开发者。在这种情况下，我会说从分离你的逻辑和表现开始，而不是使用绝对值和ID等，我会创建一个插件。代码和逻辑变得更具可读性，更易于测试，也更易于改进。我曾尝试在JSFIDLE中发布，但它在那里不起作用？这就是答案，我一直在寻找，我试图提醒自己，作为一名程序员，您更有可能发现您正在进行的工作已经由某人完成并准备好使用。这本可以为我节省很多时间，但我在查看时没有找到它。：）很乐意帮忙！我在一个项目中使用了Scrollable，并对它的易用性和灵活性感到非常满意。@michaelhagedon您答案中的链接已失效。

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

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