0

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

$(document).ready(function() { $('#slider').cycle ({ fx: 'scrollLeft', timeout: 10000, speed: 500, pager: '#pager' }); }); 图像文本文本文本立即尝试！条款和条件应用 
        <!-- 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 中放入的测试字母确实出现在以下三个过渡中，但它没有出现。我在这里想念什么？

4

1 回答 1

0

好吧，经过更多的实验，修复非常简单，但也有一个奇怪的结果。我所做的只是为寻呼机调用提供第二个参数：

$(document).ready(function() { $('#slider').cycle ({ fx: 'scrollLeft', timeout: 10000, speed: 500, pager: '#pager, #pager2' }); }) ;

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

于 2011-03-10T14:56:33.633 回答