Fatal编程技术网
  • jquery/
  • 循环中带jquery的滑动div

循环中带jquery的滑动div

jquery html css

循环中带jquery的滑动div,jquery,html,css,Jquery,Html,Css,我下面的代码有点混乱，所以我需要你的专业知识来解决这两个问题。我知道很多例子，但我想学一点，并且有一个更干净的代码 滑动时，DIV项不会并排显示。一个接一个是错误的 我是否可以增强jQuery代码，使其循环或更动态，使其看起来更专业。如果我有100个div，那就不可能处理了 它不应该停止 谢谢 <html> <style> * { margin: 0px; padding: 0px; } #cover { width:

我下面的代码有点混乱，所以我需要你的专业知识来解决这两个问题。我知道很多例子，但我想学一点，并且有一个更干净的代码

  • 滑动时，DIV项不会并排显示。一个接一个是错误的
  • 我是否可以增强jQuery代码，使其循环或更动态，使其看起来更专业。如果我有100个div，那就不可能处理了
  • 它不应该停止
    • 谢谢

    <html>
    <style>
    *           { margin: 0px; padding: 0px; }
    #cover      { width: 100%; height: 300px; background: #CCCCCC; }
    #cover div  { width: 100%; height: 200px; background: #FFFFFF; }
    .content    { text-align: center; }
    </style>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                event.preventDefault();

                $('#slider_2').hide().delay(5000);
                $('#slider_3').hide().delay(10000);
                $('#slider_1').show('slide', { direction: 'left' }, 1000);
                $('#slider_1').delay(4000).hide('slide', { direction: 'left' }, 1000);
                $('#slider_2').show('slide', { direction: 'right' }, 1000);
                $('#slider_2').delay(4000).hide('slide', { direction: 'right' }, 1000);
                $('#slider_3').show('slide', { direction: 'left' }, 1000);
                $('#slider_3').delay(4000).hide('slide', { direction: 'left' }, 1000);
            });
        </script>
    </head>

    <body>
        <div id="cover">
            <div id="slider_1"><p class="content">SLIDER ONE</p></div>
            <div id="slider_2"><p class="content">SLIDER TWO</p></div>
            <div id="slider_3"><p class="content">SLIDER THREE</p></div>
        </div>
    </body>
</html>

    
*{边距：0px；填充：0px；}
#封面{宽度：100%；高度：300px；背景：#cccc；}
#封面分割{宽度：100%；高度：200px；背景：#FFFFFF；}
.content{文本对齐：居中；}
$（文档）.ready（函数（）
{
event.preventDefault（）；
$（'#slider_2'）.hide（）.delay（5000）；
$（'#slider_3'）.hide（）.delay（10000）；
$（'#slider_1'）。show（'slide'，{direction:'left'}，1000）；
$（'#slider_1'）。延迟（4000）。隐藏（'slide'，{direction:'left'}，1000）；
$（'#slider_2'）。show（'slide'，{direction:'right'，1000）；
$（'#slider_2'）。延迟（4000）。隐藏（'slide'，{direction:'right'，1000）；
$（'#slider_3'）。show（'slide'，{direction:'left'}，1000）；
$（'#slider_3'）。延迟（4000）。隐藏（'slide'，{direction:'left'}，1000）；
});

    滑块一
    
滑块二
    

    滑块三
    这些动画需要正确链接。一个元素的所有内容都需要显示在一条语句中：

    $('#slider_1').show(...).delay(4000).hide(...);
    否则，jQuery很可能会在第二条语句中用第二条链（延迟隐藏）覆盖第一条动画链（show）。

    Ok，我现在链接了它们。我的3个问题的解决方案如何？