将Slider更改为自动 [英] Change Slider to automatically

查看：105
本文介绍了将Slider更改为自动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个滑块，它会在将鼠标悬停在项目符号上时进行更改，但是我也想在间隔后自动更改幻灯片. 这是滑块的代码

I have this slider which changes on hover over bullet but I also want to change the slides automatically after an interval. Here Is the code for the slider

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

在这里，当我将其添加到摘要中时，也会显示一些错误，但是在我的页面中它运行良好，我只需要使此贴图器自动更改贴图器即可，而无需单击.

In here some error are also showing when i added it to snippet but it is working fine in my page i just need to make this silder to chnage silder automatically without click.

推荐答案

在 setInterval() 方法来自动循环项目:

Use following code within setInterval() method to automatically cycling an item:

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

在下面的代码段中查看完整的代码.

See full code in snippet below.

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

* {
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
      
<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>

这篇关于将Slider更改为自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆