如何使用循环插件 return 第一张图片

Question

我正在为我的旋转木马使用 cycle2 插件，我编写了一个基本函数来在悬停时启动幻灯片图像，但有一些我无法实现的是当我将光标离开区域旋转木马时必须 return 第一张图怎么做？

$('.img-area').cycle({
  fx: 'none',
  speed: 750,
  timeout: 100
}).cycle("pause");


$(".otel-list").hover(function() {
  $(".img-area").cycle("resume");
}, function() {
  $(".img-area").cycle("pause");
});

.otel-list {
  width: 700px;
  background: #f0f0f0;
  border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
  content: "";
  display: table;
  clear: both;
}
.img-area {
  width: 33%;
  float: left;
  position: relative;
}
.img-area img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.content-area {
  float: right;
  width: 66%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
  <div class="img-area">
    <img src="http://malsup.github.io/images/p1.jpg" />
    <img src="http://malsup.github.io/images/p2.jpg" />
    <img src="http://malsup.github.io/images/p3.jpg" />
    <img src="http://malsup.github.io/images/p4.jpg" />
  </div>
  <div class="content-area">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
  </div>
</div>

Answer 1

只需在鼠标离开事件上使用 $(".img-area").cycle(0)。

$('.img-area').cycle({
  fx: 'none',
  speed: 750,
  timeout: 100
}).cycle("pause");

$(".otel-list").hover(function() {
  $(".img-area").cycle("resume");
}, function() {
  $(".img-area").cycle("pause");
}).mouseleave(function(){
  $(".img-area").cycle(0);
});

.otel-list {
  width: 700px;
  background: #f0f0f0;
  border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
  content: "";
  display: table;
  clear: both;
}
.img-area {
  width: 33%;
  float: left;
  position: relative;
}
.img-area img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.content-area {
  float: right;
  width: 66%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
  <div class="img-area">
    <img src="http://malsup.github.io/images/p1.jpg" />
    <img src="http://malsup.github.io/images/p2.jpg" />
    <img src="http://malsup.github.io/images/p3.jpg" />
    <img src="http://malsup.github.io/images/p4.jpg" />
  </div>
  <div class="content-area">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
  </div>
</div>

如何使用循环插件 return 第一张图片

how to return first image with cycle plugin

html

javascript

css

jquery

jquery-cycle2