Chrome JavaScript 滑块问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19978212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome JavaScript Slider issue
提问by RJcreatives
I am having trouble with a slider I am trying to build. Basically, it auto scrolls through the images just fine, however the next and previous arrows have no effect at all.
我在尝试构建滑块时遇到问题。基本上，它自动滚动图像就好了，但是下一个和上一个箭头根本没有效果。
I get this error when Next is clicked -
单击“下一步”时出现此错误 -
Uncaught ReferenceError: id is not defined gallery.js:48 event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Uncaught ReferenceError: id is not defined
Uncaught ReferenceError: id is not defined gallery.js:48 event.returnValue 已弃用。请改用标准 event.preventDefault()。未捕获的 ReferenceError：id 未定义
Here is the fiddle link - http://jsfiddle.net/8L5xA/
这是小提琴链接 - http://jsfiddle.net/8L5xA/
But here is my Html and JS -
但这是我的 Html 和 JS -
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<div class="wrapper">
<div id="slider">
<Img id="1" src="images/slide1.jpg">
<Img id="2" src="images/slide 2.jpg">
<Img id="3" src="images/slide 3.jpg">
</div>
<a href="#" class="left" onclick="prev(); return false;">Previous</a>
<a href="#" class="right" onclick="next(); return false;">Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/gallery.js"></script>
</body>
</html>
And this is JS
这是JS
sliderInt=1;
sliderNext=2;
$(document).ready(function(){
$("#slider>img#1").fadeIn(300);
startSlider();
$(".right").click(function(){
next();
});
$(".left").click(function(){
next();
});
});
var count=0;
function startSlider(){
count=$("#slider>Img").size();
loop=setInterval(function(){
if(sliderNext>count){
sliderNext=1;
sliderInt=1;
}
$("#slider>Img").fadeOut(300);
$("#slider>Img#" + sliderNext).fadeIn(300);
sliderInt=sliderNext;
sliderNext=sliderNext + 1;
},3000);
}
function prev(){
newSlide=sliderInt-1;
showSlide(newSlide);
}
function next(){
newSlide=sliderInt + 1;
showSlide(newSlide);
}
function showSlide(){
if(id>count){
id=1;
}else if(id<1){
id=count;
}
$("#slider>Img").fadeOut(300);
$("#slider>Img#" + id).fadeIn(300);
sliderInt=id;
sliderNext=id + 1;
}
I am only a beginner and any help would be hugely appreciated.
我只是一个初学者，任何帮助将不胜感激。
Many thanks
非常感谢
采纳答案by dreamweiver
there were lot of logically errors in your code, i have tuned it here
你的代码中有很多逻辑错误，我已经在这里调整了
CODE:
代码：
sliderInt = 1;
sliderNext = 2;
var count = 0;
var loop;
$(document).ready(function () {
$("#slider>img#1").fadeIn(300);
startSlider();
$(".right").click(function (event) {
//alert("clicked next");
next();
event.preventDefault();
});
$(".left").click(function (event) {
prev();
event.preventDefault();
});
});
function startSlider() {
count = $("#slider>Img").size();
delayCall();
}
function delayCall() {
loop = setInterval(function () {
if (sliderNext > count) {
sliderNext = 1;
sliderInt = 1;
}
$("#slider>Img").fadeOut(300);
$("#slider>Img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
function prev() {
// alert("previous");
clearInterval(loop);
if (sliderInt == 1) newSlide = count;
else newSlide = sliderInt - 1;
showSlide(newSlide);
}
function next() {
// alert(sliderInt+":"+count);
clearInterval(loop);
if (sliderInt == count) sliderInt = 0;
newSlide = sliderInt + 1;
showSlide(newSlide);
}
function showSlide(id) {
// alert(id+":"+count);
/* if(id>count){
id=1;
}else{
id;
}*/
$("#slider>Img").fadeOut(300);
$("#slider>Img#" + id).fadeIn(300).delay(1000);
//Thread.sleep(3000);
sliderInt = id;
sliderNext = id + 1;
delayCall();
}
FIDDLE:http://jsfiddle.net/8L5xA/4/
小提琴：http : //jsfiddle.net/8L5xA/4/
Your code had nothing to do with Chrome browser, just the logic was wrong that's it. i have verified this code on Firefox 25.0 and on Chrome 30.0.1599.101 and its working smoothly, hope this solves your problem.
您的代码与 Chrome 浏览器无关，只是逻辑错误而已。我已经在 Firefox 25.0 和 Chrome 30.0.1599.101 上验证了这个代码并且它运行顺利，希望这能解决你的问题。
Happy Coding :)
快乐编码:)
回答by Marcus Brunsten
On the line
在线上
showSlide(newSlide);
you pass the int newSlide, but on the function definition, you do not catch any arguments.
您传递了 int newSlide，但在函数定义上，您没有捕获任何参数。
Change
改变
function showSlide(){
to
到
function showSlide(id){
Hope this helps
希望这可以帮助
