可點擊的鏈接更改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/嘗試一下。