本文介绍了将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='fonts.googleapis/css?family=Roboto:300' rel='stylesheet' type='text/css'> <script src="ajax.googleapis/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">www.oxforduniversityimages/images/rotate/Image_Spring_17_7.gif</div> <div class="slide">2</div> <div class="slide">www.oxforduniversityimages/images/rotate/Image_Spring_17_7.gif</div> <div class="slide">www.oxforduniversityimages/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='cdnjs.cloudflare/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="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href='fonts.googleapis/css?family=Roboto:300' rel='stylesheet' type='text/css'> <script src="ajax.googleapis/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">www.oxforduniversityimages/images/rotate/Image_Spring_17_7.gif</div> <div class="slide">2</div> <div class="slide">www.oxforduniversityimages/images/rotate/Image_Spring_17_7.gif</div> <div class="slide">www.oxforduniversityimages/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更改为自动
发布评论