我如何使这个自动播放？

我是新来的Jquery和几乎80％的这不是我的代码我只是用它来学习如何使滑块，但我会很感激，如果有人可以帮助我告诉我我能做些什么在页面加载的时候，使该滑块自动工作。另外，当slide_index == 16时，可以做到这一点，幻灯片将正常旋转，而不是向后旋转，直到第一张图像。感谢：P我如何使这个自动播放？

HTML：

<html> 
<body> 
<div class="slider"> 
<ul> 
    <li> 
     <img src="img1.jpg" /> 
    </li> 
    <li> 
     <img src="img2.jpg" /> 
    </li> 
    <li> 
     <img src="img3.jpg" /> 
    </li> 
    <li> 
     <img src="img4.jpg" /> 
    </li> 
    <li> 
     <img src="img5.jpg" /> 
    </li> 
    <li> 
     <img src="img6.jpg" /> 
    </li> 
    <li> 
     <img src="img7.jpg" /> 
    </li> 
    <li> 
     <img src="img8.jpg" /> 
    </li> 
    <li> 
     <img src="img9.jpg" /> 
    </li> 
    <li> 
     <img src="img10.jpg" /> 
    </li> 
    <li> 
     <img src="img11.jpg" /> 
    </li> 
    <li> 
     <img src="img12.jpg" /> 
    </li> 
    <li> 
     <img src="img13.jpg" /> 
    </li> 
    <li> 
     <img src="img14.jpg" /> 
    </li> 
    <li> 
     <img src="img15.jpeg" /> 
    </li> 
    <li> 
     <img src="img16.jpg" /> 
    </li> 
    <li> 
     <img src="img17.jpg" /> 
    </li> 
</ul> 
<button class="prev">Prev</button> 
<button class="next">Next</button> 
</div> 
</div> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="slider.js"></script> 
</body> 
</html>

CSS：

.slider { 
width: 60%; 
overflow: hidden; 
height: 607px; 
position: relative; 
border: 5px #000000 solid; 
margin-left: 20%; 
} 

.slider ul { 
margin: 0; 
padding: 0; 
list-style: none; 
position: absolute; 
width: 1700%; 
height: 100%; 
top: 0; 
} 

.slider li { 
padding: 0; 
margin: 0; 
width: 33.333333%; 
height: 100%; 
overflow: hidden; 
position: absolute; 
top: 0; 
bottom: 0; 
} 

.slider li img { 
border: none; 
width: 100%; 
min-height: 100%; 
} 
.slider button { 
position: absolute; 
display: block; 
box-sizing: border-box; 
border: none; 
outline: none; 
top: 0; 
bottom: 0; 
width: 13%; 
background-color: rgba(0, 0, 0, 0.3); 
color: #fff; 
margin: 0; 
padding: 0; 
text-align:center; 
opacity: 0; 
z-index: 2; 
height: 100%; 
} 

.slider button.prev { 
left: 0; 
font-size: 30px; 
} 

.slider button.next { 
right: 0; 
font-size: 30px; 
} 

.slider button:hover, .slider button:active { 
opacity: 1.0;

}

JQuery的：

$(function() { 

var ul = $(".slider ul"); 
var slide_count = ul.children().length; 
var slide_width_pc = 100.0/slide_count; 
var slide_index = 0; 

ul.find("li").each(function(indx) { 
var left_percent = (slide_width_pc * indx) + "%"; 
$(this).css({"left":left_percent}); 
$(this).css({width:(100/slide_count) + "%"}); 
}); 

setInterval(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    } 

    function() { 
    slide(slide_index + 1); 
    if (slide_index == 16) { 
     slide(slide_index == 0); 
     ul.animate({ 
     "margin-left": margin_left_pc; 
     }, 400); 
    } 
    },500); 

function slide(new_slide_index) { 

if(new_slide_index < 0 || new_slide_index >= slide_count) return; 

var margin_left_pc = (new_slide_index * (-100)) + "%"; 

ul.animate({"margin-left": margin_left_pc}, 400, function() { 

slide_index = new_slide_index 

}); 
} 
});

来源

2016-09-17 Sonnie Thomas

幻灯片固定宽度的复位定时器？ – Ivan

我不知道如何改变这个东西我是新来的Jquery，随意评论一些更好的代码，使自动图像滑块：P我真的很感激，我无法找到很多关于这个话题只是使用网站的帮助。 –

主要思想：在setInterval内改变ul（index * liWidth）的'left'位置，当index == 16使其变为0 – Ivan

看fiddle

使用setInterval开始滑动，并clearInterval + setInterval点击后

来源

2016-09-19 18:40:19 Ivan

第一个问题：根据我的理解，即使没有单击按钮，您也希望自动滑动滑块。对于您要创建的时间间隔：

var sliderInterval = setInterval(function() { moveRight(); }, 3000);

3000这里等于3秒，随意定制。

来源

2016-09-17 15:42:49 BlueBockser

感谢您的时间，但我发布了错误的代码位，我没有再使用它了。但是，谢谢:) –

那么，你基本上可以保持代码行。你应该只在''.next'“按钮被点击的时候交换'moveRight（）;'。 – BlueBockser

变化：

$(".slider .prev").click(function() { 
console.log("prev button clicked"); 
slide(slide_index - 1); 
}); 

$(".slider .next").click(function() { 
slide(slide_index + 1); 
if (slide_index == 16){ 
slide(slide_index == 0); 
ul.animate({"margin-left": margin_left_pc}, 400); 
} 
});

要：

setInterval(function() { 
    console.log("prev button clicked"); 
    slide(slide_index - 1); 
    } 

    function() { 
    slide(slide_index + 1); 
    if (slide_index == 16) { 
     slide(slide_index == 0); 
     ul.animate({ 
     "margin-left": margin_left_pc 
     }, 400); 
    } 
    },500);

我做了什么，而不是把功能被点击上滑盖时运行，我做了它运行的功能每半秒钟。要更改每张幻灯片更改之前的时间量，您需要更改第二个括号中第500个数字。希望这有助于。

来源

2016-09-17 16:30:58 Joshua

嘿，感谢您的时间和帮助！但是，它似乎并没有工作。我应该发布我的整个代码（HTML，CSS和Jquery）吗？ –

是的，如果你可以发布你的html也会有帮助。您可以将其编辑为原始文章。 – Joshua

做到了。顺便我真的很感谢你的时间和帮助:) –

我如何使这个自动播放？

回答

相关问题