设置滑块的计时器 [英] set timer for slider
问题描述
你好
我想用jquery&做一个滑块java脚本。
我的问题是我不知道如何在我的代码中添加计时器以分别显示每个幻灯片。下面的代码是我的代码，它只显示第一个！
JSSlider.js
$（文件）.ready（function（）{
var counter = 0 ;
hideAllSlides（）;
函数hideAllSlides（）{
//调试器;
$（＃ main li）。css（display，none）;
}
//调试器;
$（＃main li）。每个（
函数（）{
//调试器;
counter + = 1;
$（this）.attr（id，slide+ counter）;
}）;
counter = 0;
$ .timer（function nextSlide（）{
//调试器;
计数器+ = 1;
hideAllSlides（）;
调试器;
$（＃main #slide+计数器）.animate（{
显示：块，
身高：切换
}）;
}，2000，true）;
// $（＃main> li img）。css（display，none）;
// $（＃main li> *）。animate（{
// display：inline-block，
//高度：切换，
//不透明度：切换
//}，慢）;
}）
index.html
Hi there
I want to make a slider using jquery & java script.
my problem is that I don't know how to add timer to my code to show each slide separately.the below code is my code and it just show the first li!!!!
JSSlider.js
$(document).ready(function () {
var counter = 0;
hideAllSlides();
function hideAllSlides() {
//debugger;
$("#main li").css("display", 'none');
}
//debugger;
$("#main li").each(
function () {
// debugger;
counter += 1;
$(this).attr("id", "slide"+counter);
});
counter = 0;
$.timer(function nextSlide() {
//debugger;
counter += 1;
hideAllSlides();
debugger;
$("#main #slide" + counter).animate({
display: "block",
height:"toggle"
});
}, 2000,true);
//$("#main>li img").css("display", "none");
//$("#main li>*").animate({
// display:"inline-block",
// height: "toggle",
// opacity: "toggle"
//}, "slow");
})
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JS/jquery-1.10.2.min.js"></script>
<script src="JS/jsSlider.js"></script>
<style>
.main li {
display: inline-block;
}
</style>
</head>
<body>
<div>
<ul id="main" class="main">
<li>
<img src="Photo/01.jpg" />
</li>
<li></li>
<li></li>
<li>
<ul>
<li>
<img src="Photo/02.jpg" />
</li>
<li>
<img src="Photo/03.jpg" />
</li>
</ul>
</li>
</ul>
</div>
<!--<script>
$(document).ready(function () {
$("#main>li>img").fadeIn("slow");
})
</script>-->
</body>
</html>
推荐答案
（document）.ready（function（）{
var counter = 0;
hideAllSlides（）;
函数hideAllSlides（）{
//调试器;
(document).ready(function () {
var counter = 0;
hideAllSlides();
function hideAllSlides() {
//debugger;
（＃main li）。css（ display，none）;
}
//调试器;
("#main li").css("display", 'none');
}
//debugger;
（＃main li）。每个（
函数（）{
//调试器;
计数器+ = 1;
("#main li").each(
function () {
// debugger;
counter += 1;
这篇关于设置滑块的计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
