如何自动移动幻灯片

Question

在我的网站中，我想自动移动此部分

为此我需要做什么。我对此查询没有任何想法。任何人都可以帮我解决这个问题。

Answer 1

<script>
for( var i = 0; i < btns.length; i++){
  btns[i].addEventListener('click', function(){
    alert('test');
  });
}
(function slideshow(){

    var slides = document.getElementById('slides').children;
    var btns = document.getElementById('btns').children;
    var i = 0;

    slides[i].style.opacity= '1';
    btns[i].style.opacity= '1';
    slides[i].style.zIndex= '999';

    function timer(){
            i = (i + 1);    
            var len = slides.length;
            var previousSlides = slides[ (i+len-1) % len ];
            var previousBtns = btns[ (i+len-1) % len ];

            if (i % slides.length == 0) {
            i = 0;
            }

slides[i].style.opacity= '1';
            slides[i].style.zIndex= '999';  
            btns[i].style.opacity= '1';
            previousSlides.style.opacity= '0';
            previousSlides.style.zIndex= '1';   
           
            previousBtns.style.opacity= '0.5';
        }       
        setInterval(timer, 4000);

}());



</script>

<div id="slides">
  <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div>
</div>
<p id="demo"></p>
<div id="btns">
   <button type="button">Click Me1</button>
<button type="button" >Click Me2</button>
<button type="button" >Click Me3</button>

<button type="button">Click Me4</button>
 </div>

将图像放入幻灯片div

Answer 2

使用Bootstrap轮播功能，请参阅此处https://getbootstrap.com/docs/3.3/examples/carousel/

请参阅this link for the actual example：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

 <!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
  <img src="la.jpg" alt="Los Angeles">
</div>

<div class="item">
  <img src="chicago.jpg" alt="Chicago">
</div>

<div class="item">
  <img src="ny.jpg" alt="New York">
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>