Question

我一直在试验Malsup的令人敬畏的jQuery循环插件，并且遇到了一些障碍。我一直在我的过渡div中使用混合内容，这已经很好了。当我在转换div中使用寻呼机时会出现问题。基本上我希望寻呼机链接与每个div一起转换，所以我在每个转换div中包含了寻呼机div。

$（document）.ready（function（）{ $（'＃slider'）。cycle（{ fx：'scrollLeft'，超时：10000，速度：500，寻呼机：'＃pager' }）; }）; 图片文本文本文本立即尝试！条款＆amp;适用条件一个

        <!-- Content Display 1 -->
        <div id="cs_1" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top: 20px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;">b</div>
        </div>
        <!-- Content Display 1 -->

        <!-- Content Display 2 -->
        <div id="cs_2" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top 26px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
        </div>
        <!-- Content Display 2 -->

        <!-- Content Display 3 -->
        <div id="cs_3" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top 18px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
        </div>
        <!-- Content Display 3 -->

寻呼机在第一张幻灯片上显示正常，并按照我想要的方式过渡，虽然我在前两个寻呼机div中输入的测试字母也没有出现在以下三个过渡中。我在这里失踪的是什么？

Answer 1

经过一些实验后，修复程序非常简单但也有一个奇怪的结果。我所做的只是为寻呼机呼叫提供第二个参与：

$（document）.ready（function（）{ $（'＃slider'）。cycle（{ fx：'scrollLeft'，超时：10000，速度：500， pager：'＃pager，＃pager2' }）; }）;

我将第二张幻灯片上的寻呼机重命名为pager2，瞧！然而奇怪的事情发生了，滑块出现在我没有重命名的两个后续面板上！当寻呼机中只有一个parm时，尽管它们都被命名为#pager，但它们并没有出现。一旦我添加了第二个parm＃pager2，之前没有出现的名为#pager的所有控件似乎都出现了。删除第二个parm会将其恢复为仅出现第一组控件的状态。奇怪，但工作，所以我不抱怨。

jQuery循环插件：让寻呼机在混合内容幻灯片div中进行转换

1 个答案: