图像滑块自动循环功能

Question

我使用这个滑块网站：

fiddle

我奋力实现两个相对简单的事情 - 如何确保它自动遍历图像，也是控制看起来有点错误 - 所以如果你点击第三个导航图标来对三个图像进行图像并且点击它，dos不会显示原始图像？

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

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

     }); 

DEMO