图像滑块自动循环功能

Question

我正在为一个网站使用这个滑块:

小提琴

我正在努力实现两个相对简单的事情-如何确保它自动循环通过图像和控制似乎有点bug -所以如果你点击第三个导航图标图像三和点击回来它不显示原始图像?

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

<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');
      });
  });

<section id="image-slider-container">
  <div class="image-slider-inner">
    <div id="image-area">
      <div class="img-area-wrapper">
        <img src="img/cookie.jpg" class="actual-img">
      </div>
    </div>
    <div id="image-area2">
      <div class="img-area-wrapper">
        <img src="img/courtyard.jpg" class="actual-img">
      </div>
    </div>
    <div id="image-area3">
      <div class="img-area-wrapper">
        <img src="img/window.jpg" class="actual-img">
      </div>
    </div>       

    <div class="slider-buttons">
      <div class="slider-buttons-container">
        <a href="image-area" class="o-links">&nbsp;</a>
        <a href="image-area2" class="o-links">&nbsp;</a>
        <a href="image-area3" class="o-links">&nbsp;</a>
      </div>
    </div>
  </div>
</section>
#image-slider-container {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    padding: 5% 0px 0% 0px;
}
.image-slider-inner {
    width: 100%;
    height: auto;     
    max-width: 1040px;
    margin: 0px auto;
    padding: 0px 20px 0px 20px;
}
#image-area2,
#image-area3 {        
    width: 100%;
    height: auto;
    display: none;        
}
#image-area {        
    width: 100%;
    height: auto;        
}
#image-area .img-area-wrapper {
    width: 80%;
    height: auto;     
    max-width: 1140px;
    margin: 0px auto;
}
.actual-img {
    width: 100%;
    height: 100%;
}
.slider-buttons {
    width: 100%;
    height: auto;
    max-width: 1140px;
    margin-top: 0px;
}
.slider-buttons-container {
    width: 100%;
    height: auto;
    max-width: 1140px;
    margin: 10px auto 0px auto;
    text-align: center;
}
.slider-buttons-container a {
    border-radius: 360px;
    border: 1px #C5C5C5 solid;
    padding: 0px 5px 0px 5px;
    margin: 0px 5px 0px 5px;
    background-color: #efefef;
    outline: 0px;
    text-decoration: none;
    font-size: 12px;
    box-shadow: -2px 1px 2px 0px #ADADAD;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.slider-buttons-container a:hover {
    border: 1px #C5C5C5 solid;
    padding: 0px 5px 0px 5px;
    background-color: #DAD8D8
}
.slider-buttons-container a:active {
    position: relative;
    top: 2px;
}
.O_Nav_Current {
    border: 1px #999999 solid !important;
    background-color: #DAD8D8 !important;
}

Answer 1

试试这个:-

$(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;
        });
      });

演示