可点击的链接更改JavaScript

Question

我在wordpress主页上使用javascript制作了一个自定义背景/图像推子。

我已经制作了一个无序的链接列表，以配合淡入淡出的图像，我想使这些链接可以点击。

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

我试图将运行推子的javascript变成一个函数，然后通过我的元素中的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函数是一个无限循环，它改变了div的背景颜色，并且每隔8秒交换一个覆盖div的图像。

现在我想让#fading-nav列表成为可点击的链接，其中第一个将图像和背景颜色设置为切换案例中的案例1，依此类推

任何想法将不胜感激

谢谢

Answer 1

考虑使用任何一个非常精心构建的幻灯片插件。 此时有很多好的提供了诸如散列监听/更新，响应式图像，可访问性增强等功能。 跨浏览器和移动测试...有了这么多好的选择，手工做它应该是因为你要么真正需要知道内外代码，要么作为挑战/学习机会。

或者......保留你的HTML并沿着这些方向尝试一些JS。 请注意，js实际上不需要<image>和<li> 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/尝试一下。