jQuery 循环插件：让分页器在混合内容幻灯片 div 中进行转换

Question

我一直在尝试 Malsup 很棒的 jQuery 循环插件，但遇到了一些障碍。我一直在我的过渡 div 中使用混合内容，效果很好。当我在转换 div 中使用寻呼机时会出现问题。本质上，我希望寻呼机链接与每个 div 一起转换，因此我将寻呼机 div 包含在每个转换 div 中。

$(document).ready(function() { $('#slider').cycle ({ fx: 'scrollLeft', timeout: 10000, speed: 500, pager: '#pager' }); }); IMAGE TEXT TEXT TEXT Try It Now!Terms & Conditions Apply a

        <!-- 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',
timeout: 10000,
speed: 500,
pager: '#pager, #pager2'
});
});

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