Jquery 图像滑块自动循环功能

我将此滑块用于网站：

我正在努力实现两件相对简单的事情——如何确保它在图像中自动循环，并且控件似乎有点问题——因此，如果你点击第三个导航图标来显示第三个图像，然后点击后退，它不会显示原始图像

我试图编辑它，但没有成功-我也试图添加第四张幻灯片，但失败了

<script>

 $(document).ready(function() {

    //loads default content
    //$('#image-area').load($('.menu_top a:first-child').attr('href'));

    $('.o-links').click(function() {

      // href has to be the id of the hidden content element
      var href = $(this).attr('href');
        $('#image-area').fadeOut(1000, function() {
            $(this).html($('#' + href).html()).fadeIn(1000);
        });
      return false;
    });

  });

  $(function() {
      $('.o-links').click(function(e) {
          //e.preventDefault();
          $('.o-links').not(this).removeClass('O_Nav_Current');
          $(this).addClass('O_Nav_Current');
      });
  });

试试这个：-

$(document).ready(function() {

$('#image').html($('#image-area').html()); 

        $('.o-links').click(function() {

          // href has to be the id of the hidden content element
          var href = $(this).attr('href');
               $('#image').fadeOut(1000, function() {
                    $(this).html($('#' + href).html()).fadeIn(1000);
            });
          return false;
        });

      });

---

嘿-小提琴似乎工作，但不是当我把它移到我的网站？你有添加额外的div在你的html？

$(document).ready(function() {

$('#image').html($('#image-area').html()); 

        $('.o-links').click(function() {

          // href has to be the id of the hidden content element
          var href = $(this).attr('href');
               $('#image').fadeOut(1000, function() {
                    $(this).html($('#' + href).html()).fadeIn(1000);
            });
          return false;
        });

      });