我遇到了两次使用相同JavaScript代码的问题。两个滑块都存在冲突,并且无法正常工作。我想知道为什么这不起作用。当我只使用一个滑块时,它可以正常工作。这是JavaScript代码:
sliderInt = 1;
sliderNext = 2;
$(document).ready(function() {
$('#slider > img#1').fadeIn(150);
startSlider();
})
function startSlider() {
var count = $('#slider > img').size();
var loop = setInterval(function() {
if (sliderNext > count) {
sliderInt = 1;
sliderNext = 1;
}
$('#slider > img').fadeOut(150);
$('#slider > img#' + sliderNext).fadeIn(150);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
function prev() {
newSlide = sliderInt - 1;
showSlide(newSlide);
}
function next() {
newSlide = sliderInt + 1;
showSlide(newSlide);
}
function stopLoop() {
window.clearInterval(loop);
}
function showSlide(id) {
stopLoop();
if (id > count) {
id = 1;
} else if (id < 1) {
id = count;
}
$('#slider > img').fadeOut(150);
$('#slider > img#' + id).fadeIn(150);
sliderInt = id;
sliderNext = id + 1;
startSlider();
}
$('#slider > img').hover(
function() {
stopLoop();
},
function() {
startSlider();
}
// In the End of the line don't put comma ','
);
sliderInt = 1;
sliderNext = 2;
$(document).ready(function() {
$('#pslider > img#1').fadeIn(150);
startSlider();
})
function startSlider() {
var count = $('#pslider > img').size();
var loop = setInterval(function() {
if (sliderNext > count) {
sliderInt = 1;
sliderNext = 1;
}
$('#pslider > img').fadeOut(150);
$('#pslider > img#' + sliderNext).fadeIn(150);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
function fprev() {
newSlide = sliderInt - 1;
showSlide(newSlide);
}
function fnext() {
newSlide = sliderInt + 1;
showSlide(newSlide);
}
function stopLoop() {
window.clearInterval(loop);
}
function showSlide(id) {
stopLoop();
if (id > count) {
id = 1;
} else if (id < 1) {
id = count;
}
$('#pslider > img').fadeOut(150);
$('#pslider > img#' + id).fadeIn(150);
sliderInt = id;
sliderNext = id + 1;
startSlider();
}
$('#pslider > img').hover(
function() {
stopLoop();
},
function() {
startSlider();
}
//In the End of the line don 't put comma ', '
);
&#13;
<div class="primary_slider">
<div id="slider">
<img id="1" src="images/slider_images/image1.jpg" alt="">
<img id="2" src="images/slider_images/image2.jpg" alt="">
<img id="3" src="images/slider_images/image3.jpg" alt="">
</div>
<a class="prev" href="#" onclick="prev(); return false;"></a>
<a class="next" href="#" onclick="next(); return false;"></a>
</div>
<div class="footer_slider">
<div id="pslider">
<img id="1" src="images/pslider/para_img1.jpg">
<img id="2" src="images/pslider/para_img.png">
<img id="3" src="images/pslider/para_img2.jpg">
</div>
<a class="fprev" href="#" onclick="fprev(); return false">
<</a>
<a class="fnext" href="#" onclick="fnext(); return false">></a>
</div>
&#13;
答案 0 :(得分:1)
您的滑块id
会遇到麻烦。 http://www.w3schools.com/tags/att_global_id.asp
您可以尝试使用类
<div class="primary_slider">
<div class="slider">
<img id="1" src="images/slider_images/image1.jpg" alt="">
<img id="2" src="images/slider_images/image2.jpg" alt="">
<img id="3" src="images/slider_images/image3.jpg" alt="">
</div>
<a class="prev" href="#" onclick="prev(); return false;"><</a>
<a class="next" href="#" onclick="next(); return false;">></a>
</div>
<div class="footer_slider">
<div class="slider">
<img id="4" src="images/pslider/para_img1.jpg">
<img id="5" src="images/pslider/para_img.png">
<img id="6" src="images/pslider/para_img2.jpg">
</div>
<a class="prev" href="#" onclick="prev(); return false">
<</a>
<a class="next" href="#" onclick="next(); return false">></a>
</div>
sliderInt = 1;
sliderNext = 2;
$(document).ready(function() {
$('#slider > img#1').fadeIn(150);
startSlider();
})
function startSlider() {
var count = $('.slider > img').size();
var loop = setInterval(function() {
if (sliderNext > count) {
sliderInt = 1;
sliderNext = 1;
}
$('.slider > img').fadeOut(150);
$('.slider > img#' + sliderNext).fadeIn(150);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
function prev() {
newSlide = sliderInt - 1;
showSlide(newSlide);
}
function next() {
newSlide = sliderInt + 1;
showSlide(newSlide);
}
答案 1 :(得分:0)
你的函数StartSlider基于带有id&#34;#slider&#34;的dom元素,你应该将滑块的id作为参数传递给你的函数
function startSlider(id) {
var count = $('#" + id + "> img').size(),
loop = setInterval(function() {
if (sliderNext > count) {
sliderInt = 1;
sliderNext = 1;
}
$('#" + id + "> img').fadeOut(150);
$('#" + id + "> img#' + sliderNext).fadeIn(150);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
并将其命名为
startSlider('pslider');
例如