Question

我有这个滑块，它会在将鼠标悬停在子弹上时发生变化，但我也想在一段时间后自动更改幻灯片。这是滑块的代码

$(document).ready(function(){
	var slide = $(".slide");
	var viewWidth = $(window).width();
	var sliderInner = $(".slider-inner");
	var childrenNo = sliderInner.children().length;

	sliderInner.width( viewWidth * childrenNo );

	$(window).resize(function(){
		viewWidth = $(window).width();
	});

	function setWidth(){
		slide.each(function(){
			$(this).width(viewWidth);
			$(this).css("left", viewWidth * $(this).index());
		});	
	}

	function setActive(element){
		var clickedIndex = element.index();
		
		$(".slider-nav .active").removeClass("active");
		element.addClass("active");
		
		sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
		
		$(".slider-inner .active").removeClass("active");
		$(".slider-inner .slide").eq(clickedIndex).addClass("active");
	}

	setWidth();

	$(".slider-nav > div").on("click", function(){
		setActive($(this));
	});

	$(window).resize(function(){
		setWidth();
	});

	setTimeout(function(){
		$(".slider").fadeIn(500);
	}, 2000);
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  padding: 40px;
  color: white;
}
.nav h1 {
  font-weight: 300;
  font-size: 3rem;
}
.nav .author {
  text-align: right;
}

.loading {
  background-color: #2ecc71;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  line-height: 600px;
  text-align: center;
  color: white;
  font-size: 2rem;
}

.slider {
  background-color: white;
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  display: none;
}

.slider-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  -webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
		  transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
  -webkit-transition-duration: 1s;
		  transition-duration: 1s;
  background-visibility: hidden;
  -webkit-transition-delay: .75s;
		  transition-delay: .75s;
  -webkit-transform: translateZ(0);
		  transform: translateZ(0);
}

.slide {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #f1c40f;
  background-visibility: hidden;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
		  transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
  -webkit-transform: translateZ(0) scale(0.8, 0.8);
		  transform: translateZ(0) scale(0.8, 0.8);
  -webkit-transition-duration: .5s;
		  transition-duration: .5s;
  text-align: center;
  line-height: 600px;
  font-size: 5rem;
  color: white;
}
.slide.active {
  -webkit-transform: scale(1, 1);
		  transform: scale(1, 1);
  -webkit-transition-delay: 2s;
		  transition-delay: 2s;
}
.slide:nth-child(2n) {
  background-color: #2ecc71;
}
.slide:nth-child(3n) {
  background-color: #3498db;
}
.slide:nth-child(4n) {
  background-color: #9b50ba;
}

.slider-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
		  transform: translateX(-50%);
  padding: 20px;
  text-align: center;
}
.slider-nav > div {
  float: left;
  width: 10px;
  height: 10px;
  border: 1px solid white;
  z-index: 2;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  border-radius: 50%;
  opacity: .5;
  -webkit-transition-duration: .25s;
		  transition-duration: .25s;
  background-color: transparent;
}
.slider-nav > div:hover {
  opacity: 1;
}
.slider-nav > div.active {
  background-color: white;
  -webkit-transform: scale(2);
		  transform: scale(2);
  opacity: 1;
}

<html >
   <head>
      <meta charset="UTF-8">
      <title>Gummy slider</title>
      <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <nav class="nav">
         <h1> slider</h1>
         <p class="author">by Atishay Khare</p>
      </nav>
      <div class="loading">
         Loading...
      </div>
      <div class="slider">
         <div class="slider-inner">
            <div class="slide active">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
            <div class="slide">2</div>
            <div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
            <div class="slide">https://www.oxforduniversityimages.com/images/rotate/Image_Spring_17_7.gif</div>
            <div class="slide">5</div>
            <div class="slide">6</div>
            <div class="slide">7</div>
            <div class="slide">8</div>
         </div>
         <nav class="slider-nav">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
         </nav>
      </div>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src="js/index.js"></script>
   </body>
</html>

在这里，当我将它添加到代码片段时，也会显示一些错误，但它在我的页面中工作正常，我只需要让这个丝绸自动更换silder而不需要点击。

Answer 1

设置间隔。您可以自动调用并使用幻灯片的单击事件重置。调用startAuto（）重置，因为添加了clearTnteval（）。

var Auto;

function startAuto() {
  clearInterval(Auto);    
  Auto = setInterval(function(){ 
    element = $(".middle-slider-nav .active").next();
    setActive(element);
  }, 3000);
}

Answer 2

在setInterval()方法中使用以下代码自动循环项目：

"end_time"

请参阅下面的代码段中的完整代码。

(start_time <= from_time && end_time > from_time) || (start_time < to_time && end_time >= from_time))

var navs = $(".slider-nav > div");
var cur = $(".slider-nav > .active").index();
var nxt = (cur + 1) % navs.length;
setActive(navs.eq(nxt));

$(document).ready(function(){
	var slide = $(".slide");
	var viewWidth = $(window).width();
	var sliderInner = $(".slider-inner");
	var childrenNo = sliderInner.children().length;

	sliderInner.width( viewWidth * childrenNo );

	$(window).resize(function(){
		viewWidth = $(window).width();
	});

	function setWidth(){
		slide.each(function(){
			$(this).width(viewWidth);
			$(this).css("left", viewWidth * $(this).index());
		});	
	}

	function setActive(element){
		var clickedIndex = element.index();
		
		$(".slider-nav .active").removeClass("active");
		element.addClass("active");
		
		sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
		
		$(".slider-inner .active").removeClass("active");
		$(".slider-inner .slide").eq(clickedIndex).addClass("active");
	}

	setWidth();

	$(".slider-nav > div").on("click", function(){
		setActive($(this));
	});

	$(window).resize(function(){
		setWidth();
	});

	setTimeout(function(){
		$(".slider").fadeIn(500);
	}, 2000);
  
  // Change Slider to automatically each 3 second.
  setInterval(function(){
    var navs = $(".slider-nav > div");
    var cur = $(".slider-nav > .active").index();
    var nxt = (cur + 1) % navs.length;
    console.log(nxt);
    setActive(navs.eq(nxt));
  }, 3000);
});

将滑块更改为自动

2 个答案: