Question

我在我的旋转木马上使用了cycle2插件，我写了一个基本功能来悬停时启动幻灯片图像，但有些东西是我无法实现的，当我从区域旋转木马离开光标时必须先返回想象一下怎么做？

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

在鼠标离开事件中使用database.aggregate( "{ $match: { '_id': " + gatewayId + " }}") .and("{ $facet: { 'Averages': [ { $unwind: '$gatewayReadings' }, { $sort: {'gatewayReadings.timestamp': 1}}, { $group: { _id: { year: { $year: '$gatewayReadings.timestamp' }, dayOfYear: { $dayOfYear: '$gatewayReadings.timestamp' }, interval: { $subtract: [ { $minute: '$gatewayReadings.timestamp' }, { $mod: [{ $minute: '$gatewayReadings.timestamp'}, 15] } ]}}, timestamp: { $last: '$gatewayReadings.timestamp'}, temperature_1: { $avg: '$gatewayReadings.temperature_1'}, temperature_2: { $avg: '$gatewayReadings.temperature_2'}, battery_voltage: { $avg: '$gatewayReadings.battery_voltage'}, count: { $sum: 1} } }] } }").as(Object.class)。

＆＃13;

$(".img-area").cycle(0)

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

如何使用循环插件返回第一个图像

1 个答案: