我按照 youtube 上的教程制作了一张照片……卷轴? ( https://www.youtube.com/watch?v=yikHrIMsccw ) 并且终生无法弄清楚为什么我的照片显示与我执行代码之前相同。它们应该在循环中每 3 秒淡入淡出。我有 8 张照片,这些照片对我的知识和对书面代码的理解应该无关紧要。
function Slider() {
$(".photoSlider#1").show("fade", 300);
$(".photoSlider#1").delay(3000).hide("slide", { direction: 'left' }, 300);
var sliderCount = $(".slider img").size();
var count = 2;
setInterval(function () {
$(".photoSlider#" + count).show("slide", { direction: 'right' }, 300);
$(".photoSlider#" + count).delay(3000).hide("slide", { direction: 'left' }, 300);
if (count >= sliderCount) {
count = 1;
} else {
count = count + 1;
}//end if/else statement
}, 3600);//end setinterval
}//end function slider
这是我的 javascript,来自 google 的 jqueryui 和 jquery 库 api 在我的 head 标签中。
<div class="photoSlider">
<img id="1" src="~/Content/Photos/photo1.jpg" />
<img id="2" src="~/Content/Photos/photo2.jpg" />
<img id="3" src="~/Content/Photos/photo3.jpg" />
<img id="4" src="~/Content/Photos/photo4.jpg" />
<img id="5" src="~/Content/Photos/photo5.jpg" />
<img id="6" src="~/Content/Photos/photo6.jpg" />
<img id="7" src="~/Content/Photos/photo7.jpg" />
<img id="8" src="~/Content/Photos/photo8.jpg" />
</div>
这是我的 slider html
.photoSlider{
width:600px; overflow:hidden;margin:30px auto;
background-image:url(~/Content/Photos/loading.gif);
background-repeat:no-repeat;
background-position:center;
}
.photoSlider img {
width:600px;
display:none;
}
这是我应用到 html 的 css。随着
display:none;
它根本不显示图片,这是它应该显示的,但是 javascript 应该使它们淡入淡出,对吗?同样根据教程,背景图像(只是一个旋转的 circle.gif)应该显示在图片后面,但是当它们不显示时,也不会显示。
最佳答案
问题(或其中一个问题)是您使用的选择器。
您正在使用 .photoSlider#1
。这意味着具有 ID 1
和类 photoSlider
的元素。
您应该使用 .photoSlider #1
(注意空格)。这意味着一个元素具有 ID 1
,并且具有类 photoSlider
的祖先。
尽管如此,当我运行经过此修改的代码时,控制台中仍然出现错误,因此您还有更多工作要做。至少这解释了为什么根本没有图像出现。
关于javascript - Jquery 自定义照片幻灯片同时显示所有图像而不是一个然后下一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32103683/