Question

我在网站上使用此滑块：

我正在努力实现两个相对简单的事情 - 如何确保它自动循环通过图像，而且控件看起来有点儿 - 所以如果你点击第三个导航图标来图像三并点击它后面的dosn＆＃ 39; t显示原始图像？

我试图对此进行编辑但没有成功 - 我还尝试添加第四张幻灯片，但它失败了？

<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

图像滑块自动循环功能

1 个答案: