我如何使这个自动播放?
我是新来的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
});
}
});
第一个问题:根据我的理解,即使没有单击按钮,您也希望自动滑动滑块。对于您要创建的时间间隔:
var sliderInterval = setInterval(function() { moveRight(); }, 3000);
3000这里等于3秒,随意定制。
感谢您的时间,但我发布了错误的代码位,我没有再使用它了。但是,谢谢:) –
那么,你基本上可以保持代码行。你应该只在''.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个数字。希望这有助于。
嘿,感谢您的时间和帮助!但是,它似乎并没有工作。我应该发布我的整个代码(HTML,CSS和Jquery)吗? –
是的,如果你可以发布你的html也会有帮助。您可以将其编辑为原始文章。 – Joshua
做到了。顺便我真的很感谢你的时间和帮助:) –
幻灯片固定宽度的复位定时器? – Ivan
我不知道如何改变这个东西我是新来的Jquery,随意评论一些更好的代码,使自动图像滑块:P我真的很感激,我无法找到很多关于这个话题只是使用网站的帮助。 –
主要思想:在setInterval内改变ul(index * liWidth)的'left'位置,当index == 16使其变为0 – Ivan