Question

我有以下HTML＆amp; CSS。

HTML

<DIV class="newsPic"></DIV>
<DIV class="newsPicTwo"></DIV>
<DIV class="newsPicThree"></DIV>

CSS

.newsPic {
width: 500px;
height: 200px;
}

.newsPicTwo {
width: 500px;
height: 200px;
}

.newsPicThree {
width: 500px;
height: 200px;
}

是否有可能淡入DIV“newsPic”。淡出它。然后淡入“newsPicTwo”等...然后在它完成后循环？是否也可以在“newsPic”，“newsPicTwo”等中添加尽可能多的其他DIVS /内容，并使其全部淡化。

Answer 1

有可能吗？是的！

如何？通过JS（DOM，动画）和一些CSS（转换，关键帧）

Answer 2

您需要做一些事情。

保留一个单独的课程：.newsPic。
创建一个父级，例如：newsPics。
使用jQuery Slider插件，例如bxSlider。

以简单的方式，您可以执行类似 Ticker ：

$(function () {
  $('.newsPics').bxSlider({
    minSlides: 1,
    mode: 'vertical',
    maxSlides: 1,
    slideWidth: 500,
    slideHeight: 200,
    slideMargin: 10,
    ticker: true,
    speed: 6000,
    pause: 1000
  });
});

.newsPic {
  width: 500px;
  height: 200px;
  background-color: #99f;
  text-align: center;
  line-height: 200px;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />

<div class="newsPics">
  <div class="newsPic">One</div>
  <div class="newsPic">Two</div>
  <div class="newsPic">Three</div>
</div>

我如何淡入＆amp;淡出3个div与div中的其他div

2 个答案: