如何为div自动滑动

Question

我有三个主要的电影海报。我想要三个div自动滑动，还需要左右导航按钮。怎么办呢？

HTML代码

<div class="movie-review">
<div class="single-movie">
<img src="style.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>

<div class="single-movie">
<img src="rasputin.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>

<div class="single-movie">
<img src="spirit.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>

</div>

CSS代码

.single-movie {width:250px; height:370px; float:left;}
.single-movie img {position:absolute; -webkit-transition: 0.4s ease; transition: 0.4s ease;}
.single-movie img:hover {-webkit-transform: scale(1.08); transform: scale(1.08);}
.description {background:rgba(0,0,0,0.9); color:#fff;  padding:5px 9px; position:relative; top:290px;}
.movie_title {font-size:22px;}
.rating {color:#ff6000; font-size:18px;}

Answer 1

你可以使用光滑的滑块来做到这一点。这是我的codepen link

$('.movie-review').slick();

Answer 2

您可以使用Bootstrap carousel

执行此操作

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

＆＃13;

/* carousel */
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}
.media-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <h2>Media Slider Carousel BS3</h2>
  </div>
  <div class='row'>
    <div class='col-md-8'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>      
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

请参阅Full Page Demo