jquery - 可点击的链接来更改 javascript

Question

我在我的 WordPress 主页中使用 JavaScript 制作了一个自定义背景/图像推子。

我制作了一个无序列表的链接来伴随褪色的图像，我想让这些链接可点击。

单击后，我希望图像推子跳转到用户想要的图像，但我不知道从哪里开始(有点像标准轮播上的导航)。

我尝试将运行推子的 JavaScript 编写为一个函数，并通过 a 元素中的 onclick 向其传递一个数字，但它把推子弄乱了!

这是运行推子的 JS:

jQuery(document).ready(function($) {

    window.setInterval(function () {
        // increase by num 1, reset to 0 at 4
        num = (num + 1) % 3;

        switch (num){
            case 1:{
                $('#page').animate( { backgroundColor: '#8D2251' },1500);
                $('#banner_1').fadeIn(1500);
                $('#banner_3').fadeOut(500);
                $('#ecommerce').removeClass('current-fading-nav');
                $('#start-ups').addClass('current-fading-nav');
                break;
            }
            case 2:{
                $('#page').animate( { backgroundColor: '#8D2251' },1500);
                $('#banner_2').fadeIn(1500);
                $('#banner_1').fadeOut(500);
                $('#start-ups').removeClass('current-fading-nav');
                $('#students').addClass('current-fading-nav');
                break;
            }
            case 0:{
                $('#page').animate( { backgroundColor: '#07102D' },1200);
                $('#banner_3').fadeIn(1500);
                $('#banner_2').fadeOut(500);
                $('#students').removeClass('current-fading-nav');
                $('#ecommerce').addClass('current-fading-nav');
                break;
            }
        }
    }, 8000); // repeat forever, polling every 3 seconds
});

以及伴随它的 HTML:

<?php if(is_front_page()){ ?>
            <div class="fading-container">
                <div class="fading">
                    <img id="banner_1" class="images" src="<?php bloginfo('template_url'); ?>/images/BANNER_START_UP.png"/>
                    <img id="banner_2" class="images" src="<?php bloginfo('template_url'); ?>/images/BANNER_STUDENT.png"/>
                    <img id="banner_3" class="images" src="<?php bloginfo('template_url'); ?>/images/BANNER_ECOMMERCE.png"/>
                </div>

                <div id="fading-nav">
                    <div id="fading-nav-inner">
                        <ul>
                            <li id="start-ups" class="current-fading-nav">Start Up</li>
                            <li id="students">Student CV's</li>
                            <li id="ecommerce">Ecommerce</li>
                        </ul>
                    </div>
                </div>
            </div>
            <?php }?>

基本上，javascript 函数是一个无限循环，每 8 秒更改 div 的背景颜色并交换覆盖 div 的图像。

现在我希望将 #fading-nav 列表设为可点击的链接，其中第一个将图像和背景颜色设置为 switch case 中的 case 1，依此类推

任何想法将不胜感激

谢谢

Answer 1

考虑使用任何一个真正构建良好的幻灯片插件。目前有很多好的产品提供了哈希监听/更新、响应式图像、可访问性增强等功能。跨浏览器和移动设备经过测试...有这么多好的选择，手动完成应该是因为您要么真的需要从里到外了解代码，要么作为挑战/学习机会。

或者...保留你的 HTML 并尝试一些 JS。请注意 <image>和<li> js 实际上并不需要 id 属性。

function sliderInit($) {
    var totalItems = $('.fading img').length;
    var sliderTimer = window.setInterval(rotateSlider, 4000);

    $("#fading-nav-inner li").on("click", updateSlider);

    function updateSlider(e) {
        // don't need an id if the number of links and number of images are always equal.
        // just show image(n) where n is the index() of the link clicked.
        var $target = $(e.target).index();
        rotateSlider($target);
    }

    function toggleClass(index) {
        $('.current-fading-nav').removeClass('current-fading-nav');
        $('#fading-nav-inner li').eq(index).addClass('current-fading-nav');
    }

    function rotateSlider(index) {
        var $active = $('.fading img:visible');

        // if there is an index, this was triggered by updateSlider()
        if (index) {
            $('.fading img').eq(index).fadeIn(1500);
            toggleClass(index);
        } else { // no index, came from setInterval
            // start from the first if we're at the end
            if ($active.index() === (totalItems - 1)) {
                $('.fading img').eq(0).fadeIn(1500);
                toggleClass(0);
            } else { // otherwise, display the next image
                toggleClass($active.index() + 1);
                $active.next('img').fadeIn(1500);
            }
        }
        $active.fadeOut(500);

        // restart the clock
        window.clearInterval(sliderTimer);
        sliderTimer = window.setInterval(rotateSlider, 4000);
    }
}

jQuery(document).ready(function ($) {

    sliderInit($);

});

http://jsfiddle.net/G5xbL/5/尝试一下。