Question

所以目前我的图像轮播仅在用户移动时移动，但我喜欢它，因此它也会自动在图像之间流动。我目前的代码如下：

<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.js"></script> <!-- 16 KB -->

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama" id='carousel'>
  <img src="images/carousel1.jpg">
  <img src="images/carousel2.jpg">
  <img src="images/carousel3.jpg">
  <img src="images/carousel4.jpg">
</div>

有人可以建议我应该添加什么来创建所需的功能吗？感谢。

Answer 1

将data-autoplay="true"添加到<div class="fotorama" id='carousel'>，如下所示：<div class="fotorama" id='carousel' data-autoplay="true">。

Answer 2

你可以简单地使用开源的twitter bootstrap框架，其中包含许多处理轮播的类。所以你必须下载bootstrap.min.css和carousel.css以及bootstrap.min.js和 jquery.min.js（最新版本）

这是一个例子：

<!-- Carousel
================================================== -->
<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>
  <div class="carousel-inner">
    <div class="item active">

      <div class="container">
         <img src="images/header1.png" alt="First slide">
        <div class="carousel-caption">                
            <h1>Enjoy yourself in oursite</h1>
          <p><a class="btn btn-lg btn-primary" href="signup.html#inscription" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container">
          <img src="images/header2.png" alt="header2" >
        <div class="carousel-caption">
            <h1>See all our products in anytime you want </h1>            
          <p><a class="btn btn-lg btn-primary" href="menProducts.html#mi-slider" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="container">
          <img src="images/header3.png"/>
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>             
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->

如何让html中的图像轮播自己在图片之间移动？

2 个答案: