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

在我收到您提供的网站的通知后，我需要稍微修改一下我的答案：

你给我的网站是使用猫头鹰旋转木马，如果你也使用猫头鹰旋转木马，那么它很容易实现：

我们假设你有一个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
    });
});

如果您不使用猫头鹰，我仍然建议您下载它：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);

无需单击即可自动滚动Jquery

1 个答案: