Question

有些人可以，请！帮我解决这个问题。好的，所以我有一个代码，起初我认为运行良好，但我忘记了当加载默认的<img src="test-img-1.jpg" class="actual-img">内容时，图像下方的三个按钮中的第一个应该采用我已指定的活动css状态用于活动按钮。现在我想要的是这个小代码通过将css隐藏内容加载到＆＃34; .image-area＆＃34;中来表现得像普通滑块。 div，它点击按钮时工作。当我试图给第一个加载的内容一个活动状态时，问题才浮出水面。我认为可以解决这个问题的一种方法（我无法实现它）是让第一个即时默认内容为此内联隐藏div :( <div id="image-area2"> <div class="img-area-wrapper"> <img src="test-img-2.jpg" class="actual-img"> </div> </div>）以某种方式让第一个按钮设置为活动状态。我还应该提一下，我对jquery不是最好的。请帮我解决这个问题！

这是一个更好理解的小提琴：http://jsfiddle.net/pyrot/84sU4/

如果我这样做的方式完全荒谬，请告诉我。

这是我的代码：

  <script type="text/javascript">

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

这是我的HTML：

<section id="image-slider-container">
  <div class="image-slider-inner">

    <div id="image-area">
      <div class="img-area-wrapper">
        <!--currently this is the default I want to change-->
        <img src="test-img-1.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area2">
      <div class="img-area-wrapper">
        <!--I would like this to be the default content that when
        seen the first button is set to active-->
        <img src="test-img-2.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area3">
      <div class="img-area-wrapper">
        <img src="test-img-3.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>

这是我的css：

#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

当我试图将第一个加载的内容置于活动状态时，问题才浮出水面

这是否意味着您要将类添加到第一个按钮？

$('.o-links').click(function(e) {
  // ...
}).first().addClass('O_Nav_Current');

而不是使用滑块项目的ID并重置html内容，您可以使用类和索引：

CSS：

.image-area {
    width: 100%;
    height: auto;
    display: none;
}

.image-area:first-of-type {
    display: block;
}

JavaScript的：

var $slides = $('.image-area'),
    $btns = $('a.o-links');

$btns.on('click', function (e) {
    var i = $btns.removeClass('O_Nav_Current').index(this);
    $(this).addClass('O_Nav_Current');

    $slides.filter(':visible').fadeOut(1000, function () {
        $slides.eq(i).fadeIn(1000);
    });

    e.preventDefault();

}).first().addClass('O_Nav_Current');

http://jsfiddle.net/RmF57/

请帮我把这个脚本转换成一个简单的图像滑块

1 个答案: