自動滾動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

後，我與你提供的網站告知，我需要修改我的回答一點：

你給我用貓頭鷹旋轉木馬，如果您還使用貓頭鷹旋轉木馬，那麼該網站它可以很容易地實現：

假設你有一個包含圖像塊這樣一個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樣T他實現你想要的東西：

注：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);​