尝试编写 JavaScript 幻灯片,但一段时间后图像不对齐
Trying to write a javascript slideshow, but the images do not align after awhile
我正在构建这个网站,其中包含用javasript编写的图像幻灯片。这是相关的 html。
<table>
<tr>
<td id="firstelement">
<div id="leftsidebar">
<img class="leftslide" src="/images/IMG_96768613163825.jpeg">
<img class="leftslide" src="/images/IMG_96772192197469.jpeg">
<img class="leftslide" src="/images/IMG_96781303842831.jpeg">
<img class="leftslide" src="/images/IMG_96785091848819.jpeg">
<img class="leftslide" src="/images/IMG_96764834500597.jpeg">
</div>
</td>
<td id="secondelement">
<div id="slideshow">
<img class="slide" src="/images/IMG_96764834500597.jpeg">
<img class="slide" src="/images/IMG_96768613163825.jpeg">
<img class="slide" src="/images/IMG_96772192197469.jpeg">
<img class="slide" src="/images/IMG_96781303842831.jpeg">
<img class="slide" src="/images/IMG_96785091848819.jpeg">
</div>
</td>
<td id="thirdelement">
<ul id="announcements"><h3>Announcements</h3>
<li class="announcement">Announcement #1 - Dates and times could go here, along with a short description of the announcement.</li><hr>
<li class="announcement">Announcement #2 - These could just be links to pages that have fliers or other representations of the announcements.</li><hr>
<li class="announcement">Announcement #3 - Could even add images, experiment with fonts, etc.</li><hr>
<li class="announcement">Announcement #4 - These would change as needed. I am only adding generic text because I am not aware of any current announcements that need posted.</li><hr>
</ul>
</td>
</tr>
</table>
这是幻灯片.js让它运行
// Global variables
var numslides = 0;
var numleftslides = 0;
var currentslide = 0, oldslide = 4;
var slide1 = 0;
var slide2 = 1;
var slide3 = 2;
var slide4 = 3;
var slide5 = 4;
var x = 0;
var a = 0;
var b = 240;
var c = 480;
var d = 720;
var e = 960;
var picWidth = 0;
var leftPicHeight = 0;
var slides = new Array();
var leftslides = new Array();
function makeSlideShow() {
// hide the nav bar options
setupMenu();
// find all images with the class "slide"
imgs = document.getElementsByTagName("img");
for (i = 0; i < imgs.length; i++) {
if (imgs[i].className != "slide" && imgs[i].className != "leftslide") continue;
else if (imgs[i].className == "slide" ) {
slides[numslides] = imgs[i];
jQuery("#slideshow").css('width', jQuery(slides[numslides]).css('width'));
// stack images with first slide on top
if (numslides == 0) {
imgs[i].style.zIndex = 10;
}
else {
imgs[i].style.zIndex = 0;
}
//imgs[i].onclick = nextSlide;
numslides++;
}
else {
leftslides[numleftslides] = imgs[i];
numleftslides++;
}
} // end for loop
nextSlide();
} // end makeSlideShow()
function nextSlide() {
// Set current slide to be under the new top slide
slides[currentslide].style.zIndex = 9;
// Move older slide to the bottom of the stack
slides[oldslide].style.zIndex = 0;
oldslide = currentslide;
currentslide++;
if (currentslide >= numslides) currentslide = 0;
// start at the right edge
picWidth = parseInt(jQuery(slides[currentslide]).css('width'));
jQuery(slides[currentslide]).css('left', -picWidth + "px");
x = -picWidth;
// Move the new slide to the top
slides[currentslide].style.zIndex = 10;
if (a < 0) a = 960;
if (b < 0) b = 960;
if (c < 0) c = 960;
if (d < 0) d = 960;
if (e < 0) e = 960;
animateSlide();
window.setTimeout("nextSlide();", 5000);
}
function animateSlide() {
// Lower moves slower, higher moves faster
x = Math.min(0, x + 7);
a = Math.max(-240, a - 2);
b = Math.max(-240, b - 2);
c = Math.max(-240, c - 2);
d = Math.max(-240, d - 2);
e = Math.max(-240, e - 2);
// previous image moves off the left edge
// (comment the next line for a different effect)
jQuery(slides[oldslide]).css('left', (x + picWidth) + "px");
jQuery(slides[currentslide]).css('left', x + "px");
jQuery(leftslides[slide1]).css('top', a + "px");
jQuery(leftslides[slide2]).css('top', b + "px");
jQuery(leftslides[slide3]).css('top', c + "px");
jQuery(leftslides[slide4]).css('top', d + "px");
jQuery(leftslides[slide5]).css('top', e + "px");
// repeat until slide is at zero position
if (x < 0) window.setTimeout("animateSlide();", 1);
}
// create the slideshow when the page loads
jQuery(document).ready(makeSlideShow);
幻灯片实际上(有点(有效。在火狐和铬中,当浏览器启动时,它似乎工作正常。但是,当我将其最小化,然后再次将其调回时,图片仍然动画,但它们会错位。在Internet Explorer中,图像移动速度不够快,时间完全关闭。任何帮助将不胜感激。我将在网络竞赛中进入这个网站,明天下午我将对其进行演示。提前谢谢。
不是答案,但这太长了,无法发表评论:
有一些事情你可以优化。例如,无需按标签名称获取所有图像,然后使用 for
循环检查每个图像是否具有类名slide
然后将其添加到数组中。由于您已经在使用 jQuery,因此您可以获取所有幻灯片图像使用
var slides = jQuery.makeArray($(".slide"));
我刚刚将您的标记添加到 Fiddle 中(没有您的脚本(,并添加了一些虚拟图像和控制台日志消息,以便轻松检查此数组包含的内容。
供参考:http://api.jquery.com/jquery.makearray/
经过许多辛苦,我相信我知道问题是什么,我找到了解决它的方法。我相信可能正在发生的事情是,更改页面焦点打开和关闭会干扰幻灯片放映,以至于图像定位的计算跟不上显示。当你这样做时,这几乎就像你进入了"竞争条件"。因此,我通过具有window.onfocus(...)
事件的适当函数触发器来重置所有内容。这允许在用户离开页面并返回时重置所有内容,例如在最小化和还原页面的情况下。由于IE加载图像的速度不够快,我放置了一个if-statement
以查看浏览器是否是IE,然后以不同的方式处理事情。这似乎是一个很好的补丁。不幸的是,现在我意识到真正的大屏幕会扭曲网站并干扰某些功能。我想我现在只能接受这一点,但如果有人对此有任何建议,我会全力以赴。感谢所有参与这个问题的人。
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 收集一段时间内的EMG数据.建议JS
- 在一段时间内切换文本
- 如何停止字幕文本一段时间,然后继续
- HTTP服务器在一段时间后停止(Node.js)
- Hammer.js过了一段时间就停止工作了
- Meteor-在一段时间内解锁模板(按日期)
- 画布在一段时间后开始滞后
- JS-在一段时间后水平移动图像
- AJAX 调用在获得响应并成功执行时会冻结浏览器一段时间
- 表单提交在一段时间循环PHP,jquery
- 一段时间后生成回发
- 一段时间后自动点击提交按钮
- 尝试编写 JavaScript 幻灯片,但一段时间后图像不对齐
- 如何在页面加载时隐藏图像,然后在一段时间后显示滑动
- 在下载图像后或延迟一段时间后执行jQuery函数
- 加载图像需要一段时间
- 我应该如何显示旋转图像时,响应需要一段时间
- 一段时间间隔后图像的变化
- 从数据库随机调用图库图像,每隔一段时间重叠