Question

我想创建一个翻转内容横幅。我设法找到一个几乎与我想要的相似，但仍然有我想要的东西。是否可以在没有播放按钮的情况下使其自动播放，并且当它到达最后一张幻灯片时保持向左滑动的效果。有人可以帮忙吗？一世 http://jsfiddle.net/4q3GZ/342/

$(document).ready(function () {
    var height = 300,
        width = 600,
        tabs = 3,
        $tabs = $('.tab'),
        contentNum = 1,
        delay = 2000, // time in milliseconds to pause between tabs
        timer;
    $('.play').click(function () {
        var $t = $(this);
        if($t.hasClass('playing')) {
            // stop
            clearTimeout(timer);
            $t.removeClass('playing').html('play');
        } else {
            // play
            timer = setInterval(function () {
                contentNum++; // change to contentNum--; to go left
                if(contentNum > tabs) {
                    contentNum = 1;
                } // loop right
                if(contentNum < 1) {
                    contentNum = tabs;
                } // loop left
                $tabs.eq(contentNum - 1).find('a').trigger('click');
            }, delay);
            $t.addClass('playing').html('stop');
        }
    });
    $('.main_inner').css({
        width: tabs * width
    });
    $('a.tab_link').click(function () {
        $tabs.filter('.active').removeClass('active');
        $(this).parent().addClass('active');
        // make sure contentNum is a number and not a string
        contentNum = parseInt($(this).attr('rel'), 10);
        $('.main_inner').animate({
            marginLeft: '-' + (width * contentNum - width)
        }, 600);
        return false;
    });
    $('.previous a').click(function () {
        if(contentNum > 1) {
            // find previous tab, trigger a click on the link
            // subtract 2 because eq() uses zero based index
            $tabs.eq(contentNum - 2).find('a').trigger('click');
        }
        return false;
    });
    $('.next a').click(function () {
        if(contentNum < tabs) {
            // find next tab, trigger a click on the link
            // contentNum doesn't need + 1 because it is +1 relative to eq()
            // which is a zero based index
            $tabs.eq(contentNum).find('a').trigger('click');
        }
        return false;
    });
});

Answer 1

#play按钮具有绑定到匿名函数的事件侦听器，该函数开始内容滑动过程。将匿名函数移出到命名函数，并在页面加载完成后调用它。

然而，最好不要依赖这些预先打包的解决方案，而是努力理解代码的工作原理。帮助自己，并在没有谷歌搜索脚本的帮助下学习如何做到这一点。使用在线示例仅作为参考。

滑动左侧内容横幅

1 个答案: