無需單擊即可自動滾動Jquery

Question

我從主題復制了代碼。 我單擊按鈕后，此代碼即可工作。 當我單擊按鈕時，一幅圖像向左滾動。 我想使此滾動向左自動移動，也可以單擊一下。 這是jQuery代碼。 我也應該怎么做才能使其自動滾動。

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        "use strict";

        $(window).load(function () {
            $("#frontend_customizer").animate({left: -233}, 300);
        });

        $("#frontend_customizer_button").live('click', function () {
            if( $("#frontend_customizer").hasClass( 'open' ) ){
                $("#frontend_customizer").animate({left: -233}, 300);
                $("#frontend_customizer").removeClass('open');
            }else{
                $("#frontend_customizer").animate({left: 0}, 300);
                $("#frontend_customizer").addClass('open');
            }            
        });

        $('#wrapper').click(function (kik) {
            if (!$(kik.target).is('#frontend_customizer, #frontend_customizer *') && $('#frontend_customizer').is(':visible')) {
                $("#frontend_customizer").animate({left: -233}, 300);
                $("#frontend_customizer").removeClass('open');
            }
        });

        $("#customizer_reset").live("click", function () {
            $.removeCookie( 'header_layout', {path: '/'} );
            $.removeCookie( 'navigation_type', {path: '/'} );
            $.removeCookie( 'skin_color', {path: '/'} );
            location.reload();
        });

        var default_logo = $(".main_menu .logo img").attr("src");

        if ($.cookie('header_layout')) {
            $("body").addClass($.cookie('header_layout'));
        }

        if ($.cookie('navigation_type') && $.cookie('navigation_type') == 'sticky_header') {
            $("body").addClass('sticky_header');
        }else{
            $("body").removeClass('sticky_header');
        }

        if($("body").hasClass("sticky_header")){
            $("#navigation_type").addClass("active");
        }

        $("#navigation_type").live("click", function () {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $("body").removeClass('sticky_header');
                $.cookie('navigation_type', 'static_header', {expires: 7, path: '/'});
            } else {
                $(this).addClass('active');
                $("body").addClass('sticky_header');
                $.cookie('navigation_type', 'sticky_header', {expires: 7, path: '/'});
            }
        });

        if($("body").hasClass("sticky_header")){
            $("#navigation_type").addClass("active");
        }

        if ($("body").hasClass("header_type_4")) {
            $("select[name='header_layout'] option[value='header_type_4']").attr("selected", "selected");
            $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg');
        } else if ($("body").hasClass("header_type_3")) {
            $("select[name='header_layout'] option[value='header_type_3']").attr("selected", "selected");
            $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg');
        } else if ($("body").hasClass("header_type_2")) {
            $("select[name='header_layout'] option[value='header_type_2']").attr("selected", "selected");
            $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg');
        }

        $("select[name='header_layout']").live("change", function () {
            $("body").removeClass("header_type_1 header_type_2 header_type_3 header_type_4");
            $("body").addClass($(this).val());
            if ($(this).val() != 'header_type_1') {
                $(".main_menu .logo img").attr("src", '<?php echo get_template_directory_uri(); ?>/assets/images/temp/logo_white.svg');
            } else {
                $(".main_menu .logo img").attr("src", default_logo);
            }
            $.cookie('header_layout', $(this).val(), {expires: 7, path: '/'});
        });

        if ($.cookie('skin_color')) {
            $("body").addClass($.cookie('skin_color'));
        }

        if($("body").hasClass("skin_olive")){
            $("#skin_color #skin_olive").addClass("active");
        }else if($("body").hasClass("skin_green")){
            $("#skin_color #skin_green").addClass("active");
        }else if($("body").hasClass("skin_grey")){
            $("#skin_color #skin_grey").addClass("active");
        }else if($("body").hasClass("skin_orange")){
            $("#skin_color #skin_orange").addClass("active");
        }else{
            $("#skin_color #skin_default").addClass("active");
        }

        $("#skin_color span").live('click', function () {
            $.cookie('skin_color', $(this).attr("id"), {expires: 7, path: '/'});
            $("#skin_color .active").removeClass("active");
            $(this).addClass("active");
            $("body").removeClass("skin_olive skin_grey skin_green skin_default skin_orange");
            $("body").addClass($(this).attr("id"));
        });


    });

</script>

Answer 1

在得知您提供的網站后，我需要對答案進行一些修改：

您給我的網站使用的是Owl Carousel，如果您還使用Owl Carousel，則可以輕松實現：

假設您有一個包含以下圖像塊的div：

<div id="my_carousel" class="owl-carousel">
    <div class="image_block"><img src="your image src1" /></div>
    <div class="image_block"><img src="your image src2" /></div>
    <div class="image_block"><img src="your image src3" /></div>
    ... 
</div>

然后，您只需要插入這樣的JavaScript即可實現所需的功能：

注意： autoplay : true是使其自動滾動的原因。 我還添加了autoplayHoverPause : true因此當您將鼠標懸停在其上時，自動滾動會暫停，這只是一種標准行為。

jQuery(document).ready(function($) {
    "use strict";
    var owl = $("#my_carousel");
    owl.owlCarousel({
        items: 5,
        itemsDesktop: [1199, 5 ],
        itemsTablet: [768, 3 ],
        itemsMobile: [479, 1 ],
        navigationText: ["<i class=\"fa fa-chevron-left\"></i>","<i class=\"fa fa-chevron-right\"></i>"],
        pagination: false,
        navigation : true,
        autoplay : true,
        autoplayHoverPause : true
    });
});

如果您不使用Owl，我仍然建議您下載它： http : //www.owlcarousel.owlgraphic.com/並添加到您的網站。 這對您可能非常有用。

如果您想用困難的方式做到這一點，那么這可能會給您一些想法：

請注意，500表示您將每500毫秒滾動一次，您可以自己調整此值。 並說您的圖片容器具有ID scroller ，每個圖片的寬度為imgWidth：

var scroller = getElementById("scroller");
setInterval(function(){
    var left = parseInt(scroller.style.left);
    scroller.style.left = left - imgWidth;
}, 500);​