Question

我已经能够使这个滑块做我想要的一切但我无法弄清楚如何让它自动播放图像。我希望能够自动播放并点击进行，但我对JavaScript的了解不足以使这些功能成为可能。

提前感谢您的帮助。

HTML

    <div id="image-area">
      <div class="img-area-wrapper">
        <img src="http://www.socwall.com/images/wallpapers/57751-1920x1080.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area2">
      <div class="img-area-wrapper">
        <img src="http://www.socwall.com/images/wallpapers/38075-1920x1200.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area3">
      <div class="img-area-wrapper">
        <img src="http://www.socwall.com/images/wallpapers/37436-1500x1000.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;

}

JS

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

Answer 1

使用setInterval函数。将用于转到下一个图像的代码移动到自己的函数中，然后使用setInterval调用该函数。

setInterval函数的参数是您要执行的函数以及您希望执行函数的频率（以毫秒为单位）。

实施例

var timer = setInterval(functionName,1000);

如何使此滑块自动播放图像而不是单击

1 个答案: