自动化CSS图像轮播

时间：2017-01-17 15:38:46

标签： javascript jquery

我有一个5个图像轮播，在我的网站上作为横幅。它完全用CSS编写，就像一个魅力，但我认为它会改善用户体验，让它在定时器上旋转幻灯片。

以下是我的代码，所有幻灯片都由:nth-of-type选择器表示，因此我尝试通过setTimeout()增加索引值。

$(document).ready(function() {
    var x,
    $slider = $(".carousel__track .carousel__slide:nth-of-type(x)");

    setTimeout(function() {
        if (x = 5) {
            x = 1
        } else {
            x + 1
        }
    }, 500);
});

提前感谢您的帮助。

3 个答案:

答案 0 :(得分：2)

描述

if (x = 5)设置x等于5，您需要进行比较==或明确比较===。
===表示它必须等于5并且是相同的类型（int）。

使用x++我们在进行比较后递增x，然后如果x等于5则设置x = 1.另一种方法是设置x = 0然后使用{{1}这将在执行比较运算符之前递增x。

++x

答案 1 :(得分：0)

在你的问题中，你正在考虑将x作为字符串。 检查之间的区别：

 $slider = $(".carousel__track .carousel__slide:nth-of-type(x)");

和

 $slider = $(".carousel__track .carousel__slide:nth-of-type("+x+")");

答案 2 :(得分：0)

假设作者忘记提及他的轮播基于文章HOW TO: Pure CSS “carousel”，我将提供适当的工作解决方案。

我想注意其他答案中的解决方案基于问题的代码，即使在＆＃34; fix＆＃34;之后也是如此。什么都不做。

解决方案

由于轮播在其中一个input[type=radio]元素中保存当前状态，我们真正需要做的就是确定所选input并选择下一个（或第一个）一个，如果我们到达终点）。

选择input[type=radio]就像将checked属性更改为true或false一样简单。

同样值得注意的是，下面的方法并不关心滑块中的项目数量，您需要做的就是调用autoSlide(element, delay)，其中element是任意的滑块的容器和delay是幻灯片将更改为下一个的时间（以毫秒为单位）。

＆＃13;
＆＃13; 
// Helper function for checking if Element is inside NodeList
var isInside = function (array, item) {
  for (var i = 0; i < array.length; ++i) {
    if (array[i] == item) {
      return true;
    }
  }
  return false;
};

(function() {
  var nextSlide = function(slider, delay) {
    var slides = slider.querySelectorAll('.carousel__activator');
    var currentSlide = slider.querySelector('.carousel__activator:checked');
    var nextSlide = currentSlide ? currentSlide.nextElementSibling : slides[0];
    
    // If the next slide doesn't exist, go back to the beginning
    if (!isInside(slides, nextSlide)) {
      nextSlide = slides[0];
    }
    
    // Select next slide as active
    for (var i = 0; i < slides.length; ++i) {
      nextSlide.setAttribute('checked', false);
      slides[i].checked  = false;
    }
    nextSlide.checked = true;
    
    // Queue next slide
    autoSlide(slider, delay);
  };
  
  var autoSlide = function(slider, delay) {
    delay = parseInt(delay || 5000);
    setTimeout(function() {
      nextSlide(slider, delay);
    }, delay);
  };
  
  autoSlide(document.querySelector('.my-carousel'), 1000);
  
  // TODO: Pause when user :hover-s mouse over carousel. Otherwise, it'll be irritating.
})();
＆＃13; 
/*/ Carousel's default CSS, nothing changes here /*/

/**
  * style variables
*/
/**
  * Control & indicator mixin
*/
.carousel {
  height: 300px;
  width: 400px;
  overflow: hidden;
  text-align: center;
  position: relative;
  padding: 0;
  list-style: none;
/**
  * Where the magic happens
  */
/**
    * Control element - right/left arrows
  */
/**
    * Element for holding slide indicators
  */
/**
    * Indicator for indicating active slide
  */
/**
    * Create rules for when slides are contained within a track
  */
}
.carousel__controls,
.carousel__activator {
  display: none;
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__track {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {
  -webkit-animation: carousel-show-slide 0.5s;
          animation: carousel-show-slide 0.5s;
  top: 0;
  left: 0;
  right: 0;
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {
  display: block;
}
.carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {
  opacity: 1;
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__track {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {
  -webkit-animation: carousel-show-slide 0.5s;
          animation: carousel-show-slide 0.5s;
  top: 0;
  left: 0;
  right: 0;
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {
  display: block;
}
.carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) {
  opacity: 1;
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__track {
  -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {
  -webkit-animation: carousel-show-slide 0.5s;
          animation: carousel-show-slide 0.5s;
  top: 0;
  left: 0;
  right: 0;
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {
  display: block;
}
.carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) {
  opacity: 1;
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__track {
  -webkit-transform: translateX(-300%);
          transform: translateX(-300%);
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) {
  -webkit-animation: carousel-show-slide 0.5s;
          animation: carousel-show-slide 0.5s;
  top: 0;
  left: 0;
  right: 0;
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) {
  display: block;
}
.carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) {
  opacity: 1;
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__track {
  -webkit-transform: translateX(-400%);
          transform: translateX(-400%);
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(5) {
  -webkit-animation: carousel-show-slide 0.5s;
          animation: carousel-show-slide 0.5s;
  top: 0;
  left: 0;
  right: 0;
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) {
  display: block;
}
.carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) {
  opacity: 1;
}
.carousel__control {
  height: 30px;
  width: 30px;
  margin-top: -15px;
  top: 50%;
  position: absolute;
  display: block;
  cursor: pointer;
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: #fafafa;
  opacity: 0.35;
  outline: 0;
  z-index: 3;
}
.carousel__control:hover {
  opacity: 1;
}
.carousel__control--backward {
  left: 10px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.carousel__control--forward {
  right: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.carousel__indicators {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.carousel__indicator {
  height: 15px;
  width: 15px;
  border-radius: 100%;
  display: inline-block;
  z-index: 2;
  cursor: pointer;
  opacity: 0.35;
  margin: 0 2.5px 0 2.5px;
}
.carousel__indicator:hover {
  opacity: 0.75;
}
.carousel__track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  -webkit-transition: -webkit-transform 0.5s ease 0s;
  transition: -webkit-transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
}
.carousel__track .carousel__slide {
  display: block;
  top: 0;
  left: 0;
  right: 0;
}
.carousel__track .carousel__slide:nth-of-type(1) {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.carousel__track .carousel__slide:nth-of-type(2) {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.carousel__track .carousel__slide:nth-of-type(3) {
  -webkit-transform: translateX(200%);
          transform: translateX(200%);
}
.carousel__track .carousel__slide:nth-of-type(4) {
  -webkit-transform: translateX(300%);
          transform: translateX(300%);
}
.carousel__track .carousel__slide:nth-of-type(5) {
  -webkit-transform: translateX(400%);
          transform: translateX(400%);
}
.carousel__slide {
  height: 100%;
  position: absolute;
  overflow-y: auto;
}
/**
  * Theming
*/
* {
  box-sizing: border-box;
}
body {
  background-color: #111;
  text-align: center;
  color: #fff;
}
.carousel-container {
  display: inline-block;
}
.my-carousel {
  border-radius: 5px;
  border: 2px solid #c0c0c0;
  margin: 30px;
}
.carousel__slide {
  overflow: hidden;
}
h1 {
  font-size: 50px;
  line-height: 50px;
  color: #fafafa;
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: -25px;
}
h2,
h3 {
  color: #fafafa;
}
h3 {
  font-size: 50px;
}
.carousel__indicator {
  background-color: #fafafa;
}
.carousel__slide:nth-of-type(1),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
  background-image: url("https://unsplash.it/300?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(2),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
  background-image: url("https://unsplash.it/600?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(3),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
  background-image: url("https://unsplash.it/900?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(4),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
  background-image: url("https://unsplash.it/1200?random");
  background-size: cover;
  background-position: center;
}
.carousel__slide:nth-of-type(5),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
  background-image: url("https://unsplash.it/1500?random");
  background-size: cover;
  background-position: center;
}
.carousel--thumb .carousel__indicators .carousel__indicator {
  height: 30px;
  width: 30px;
}
@media (max-width: 400px) {
  .carousel {
    max-width: 300px;
  }
}
@-webkit-keyframes carousel-show-slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes carousel-show-slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
＆＃13; 
<!-- Carousel's default HTML, nothing changes here -->

<div class="carousel my-carousel carousel--translate">
    <input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/>
    <input class="carousel__activator" type="radio" name="carousel" id="G"/>
    <input class="carousel__activator" type="radio" name="carousel" id="H"/>
    <input class="carousel__activator" type="radio" name="carousel" id="I"/>
    <input class="carousel__activator" type="radio" name="carousel" id="J"/>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="J"></label>
      <label class="carousel__control carousel__control--forward" for="G"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="F"></label>
      <label class="carousel__control carousel__control--forward" for="H"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="G"></label>
      <label class="carousel__control carousel__control--forward" for="I"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="H"></label>
      <label class="carousel__control carousel__control--forward" for="J"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="I"></label>
      <label class="carousel__control carousel__control--forward" for="F"></label>
    </div>
    <div class="carousel__track">
      <div class="carousel__slide">
        <h1>F</h1>
      </div>
      <div class="carousel__slide">
        <h1>G</h1>
      </div>
      <div class="carousel__slide">
        <h1>H</h1>
      </div>
      <div class="carousel__slide">
        <h1>I</h1>
      </div>
      <div class="carousel__slide">
        <h1>J</h1>
      </div>
    </div>
    <div class="carousel__indicators">
      <label class="carousel__indicator" for="F"></label>
      <label class="carousel__indicator" for="G"></label>
      <label class="carousel__indicator" for="H"></label>
      <label class="carousel__indicator" for="I"></label>
      <label class="carousel__indicator" for="J"></label>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题