当只有一个转盘时,我每次单击都可以更改一张图片。 但是,当js中有两个或多个相同的轮播时,它的工作原理很奇怪。 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<link href="./css/usa.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="content">
<div class="demo">
<div id="stage">
<div id="previous"></div>
<a href="#"><img class="default" src="images/pic01.jpg" width="500" height="373" /></a>
<a href="#"><img class="default" src="images/pic02.jpg" width="500" height="373" /></a>
<a href="#"><img class="default" src="images/pic03.jpg" width="500" height="373" /></a>
<a href="#"><img class="default" src="images/pic04.jpg" width="500" height="373" /></a>
<div id="next"></div>
</div>
</div>
<div class="demo">
<div id="stage2">
<div id="previous2"></div>
<a href="#"><img class="default" src="images/pic01.jpg" width="500" height="373" /></a>
<a href="#"><img class="default" src="images/pic02.jpg" width="500" height="373" /></a>
<a href="#"><img class="default" src="images/pic03.jpg" width="500" height="373" /></a>
<a href="#"><img class="default" src="images/pic04.jpg" width="500" height="373" /></a>
<div id="next2"></div>
</div>
</div>
</div>
<script src="./js/stacking.js"></script>
<script type="text/javascript">
$(function () {
$('#stage').stack({
width: 300,
height: 400
});
});
</script>
<script type="text/javascript">
$(function () {
$('#stage2').stack({
width: 300,
height: 400
});
});
</script>
</body>
</html>
Javascript / Jquery:
$.fn.stack = function (options) {
var o = $.extend({
width: 600, // width of the Stacking Gallery Images
height: 800, // height fo the Stacking Gallery Images
next: '#next', // id for the Next Navigation Button
prev: '#previous' // id for the Previous Navigation Button
}, options);
var stack = $("#stage"); // the id for the gallery.
// var stackImg = stack.find("img"); // this selects all images from the gallery
var stackImg = '#' + stack.attr('id') + ' img';
//var stackImg = "#stage img";
var count = $(stackImg).length; // counts the number of images in the gallery
stack.width(o.width);
stack.height(o.height);
// to position the next and previous buttons
$(o.next).css({
position: 'absolute',
top: o.height / 1.3,
right: -10
});
$(o.prev).css({
position: 'absolute',
top: o.height / 1.3,
left: 150
});
anim();
function anim() {
for (i = 0; i < count; i++) {
$(stackImg).eq(count - i - 1).animate({
width: (o.width - (i * 20)),
bottom: 10 + (count - (i * 10)),
right: 10 + (count - (i * 10)),
zIndex: (count - (i + 1)),
});
} // for loop
}
$(o.next).click(function () {
$(stackImg).eq(count - 1).detach().prependTo(stack);
anim();
});
$(o.prev).click(function () {
$(stackImg).eq(0).detach().appendTo(stack);
anim();
});
//second
var j = $.extend({
width: 600, // width of the Stacking Gallery Images
height: 800, // height fo the Stacking Gallery Images
next: '#next2', // id for the Next Navigation Button
prev: '#previous2' // id for the Previous Navigation Button
}, options);
var stack2 = $("#stage2"); // the id for the gallery.
// var stackImg = stack.find("img"); // this selects all images from the gallery
var stackImg2 = '#' + stack2.attr('id') + ' img';
//var stackImg = "#stage img";
var count2 = $(stackImg2).length; // counts the number of images in the gallery
stack2.width(j.width);
stack2.height(j.height);
$(j.next).css({
position: 'absolute',
top: j.height / 1.3,
right: -10
});
$(j.prev).css({
position: 'absolute',
top: j.height / 1.3,
left: 150
});
anim2();
function anim2() {
for (a = 0; a < count2; a++) {
$(stackImg2).eq(count2 - a - 1).animate({
width: (j.width - (a * 20)),
bottom: 10 + (count2 - (a * 10)),
right: 10 + (count2 - (a * 10)),
zIndex: (count2 - (a + 1)),
});
} // for loop
}
$(j.next).click(function () {
$(stackImg2).eq(count2 - 1).detach().prependTo(stack2);
anim2();
});
$(j.prev).click(function () {
$(stackImg2).eq(0).detach().appendTo(stack2);
anim2();
});
};
答案 0 :(得分:-1)
每个按钮有2个单击事件。之所以发生这种情况是因为该函数被调用了两次。
您可以通过在应用点击事件的部分中为函数添加2个条件来解决该问题。
对于第一个滑块:
c
对于第二个滑块:
if (this[0].id === "stage") {
$(o.next).click(function () {
$(stackImg).eq(count - 1).detach().prependTo(stack);
anim();
});
$(o.prev).click(function () {
$(stackImg).eq(0).detach().appendTo(stack);
anim();
});
}
编辑
一种避免重复的更好方法。
首先,脚本标签传递按钮选项:
if (this[0].id === "stage2") {
$(j.next).click(function () {
$(stackImg2).eq(count2 - 1).detach().prependTo(stack2);
anim2();
});
$(j.prev).click(function () {
$(stackImg2).eq(0).detach().appendTo(stack2);
anim2();
});
}
jQuery:
<script type="text/javascript">
$(function () {
$('#stage').stack({
width: 300,
height: 400,
prev: "#previous",
next: "#next"
});
});
$(function () {
$('#stage2').stack({
width: 300,
height: 400,
prev: "#previous2",
next: "#next2"
});
});
</script>