个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
嗨，我编写了这个简单的 javascript 幻灯片，因为我想用 javascript 编写自己的幻灯片。它会按照设定的时间间隔自动更改图像。但是，当我尝试单击后退和前进功能时，结果不准确或图像是有序的。
var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];
var i = 0;
var count = images.length;
function slidingImages()
{
i = i % count;
document.banner.src = images[i];
i++;
}
function forward()
{
i = (i + 1) % count;
document.banner.src=images[i];
}
function backward()
{
if (i <= 0)
{
i = count - 1;
}
else
{
i--;
}
document.banner.src=images[i];
}
window.onload = function()
{
slidingImages(),setInterval(slidingImages, 3000)
}; <center>
<p>
<img src="images/1.jpg" name="banner" id="name"/>
</p>
<input type="button" value="«prev" onClick="backward()">
<input type="button" value="next»" onClick="forward()">
</center>有什么解决方案可以使我的幻灯片显示准确？
最佳答案
当鼠标位于红色矩形内时，这将暂停自动行为，并在鼠标离开红色矩形后继续自动模式。这些按钮当然可以按预期工作。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
fieldset { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; border: 1px solid red; }
</style>
</head>
<body>
<section>
<p>
<img src="images/1.jpg" name="banner" id="name"/>
</p>
<fieldset id="control">
<input id="prev" type="button" value="◄">
<input id="next" type="button" value="►">
</fieldset>
</section>
<script>
var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];
var i = -1;
var count = images.length;
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var control = document.getElementById('control');
var autoSlide;
window.onload = auto;
function auto() {
autoSlide = setInterval(fwd, 3000) };
function pause() {
clearInterval(autoSlide);
}
function fwd() {
if (i >= 0 && i < 2)
{
i += 1;
}
else
{
i = 0;
}
document.banner.src=images[i];
}
function rev() {
if (i > 0 && i <= 2)
{
i -= 1;
}
else
{
i = 2;
}
document.banner.src=images[i];
}
prev.addEventListener('click', function() {
rev();
}, false);
next.addEventListener('click', function() {
fwd();
}, false);
control.addEventListener('mouseover', function() {
pause();
}, false);
control.addEventListener('mouseout', function() {
auto();
}, false);
</script>
</body>
</html>
关于javascript - JS : Slideshow inaccurate result，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31598906/
25
4
0
我使用这个 slider http://bxslider.com/examples/thumbnail-pager-1 。它有效，但我有很多元素，缩略图不适合一行并移至下一行。如何像轮播一样制作缩略图
我正在寻找一个 jQuery 幻灯片来在中心显示事件图像，并在事件图像的左侧和右侧显示下一个上一个图像。事件图像的宽度将是固定的，其他两个图像的宽度将不固定，它将根据浏览器宽度进行计算。 一个good
我正在为我的 slider 使用此插件 http://tympanus.net/codrops/2013/01/28/flipping-circle-slideshow/ 演示链接:http://ty
我有一个 JavaScript SlideShow，我想在图像更改时删除“闪光”效果，并添加淡入淡出效果。我找到了很多解决方案，但没有任何效果我不知道为什么 :-( ... 我把我的代码贴在这里: h
Jquery function Slider() { $(".sl
您可以通过运行以下命令在事件 html 设置中显示 Jupyter 笔记本: $ jupyter nbconvert untitled.ipynb --to slides --post serve 有
我正在尝试使用 jQuery 制作一个非常简单的幻灯片。我首先尝试使用 position:absolute 来让它工作，但这会干扰布局，所以我现在决定尝试使用 display: 来代替。 我目前有这个
我想加载 Jquery Cycle 幻灯片，加载后暂停，直到用户单击“播放”按钮。我是 Jquery 新手，所以你能给我详细的解释和可能的示例代码吗？你可以看到我的幻灯片@www.sessomspho
所以我有这个代码: $(document).ready(function(){ $("#slideshow > div:gt(0)").hide(); setInterval(funct
我已经实现了 Gallerific SlideShow，我遇到的问题是缩略图垂直显示在 2 列中。 http://www.davincispainting.com/InteriorGallery.as
你好，我添加了一个 JQuery SlideShow，其中包含 6 张 png 图片，每张图片大小为 548px X 320px 出于某种原因，有时当页面首次加载时，这些图像显得非常小。当我刷新页面时
这是下拉菜单和幻灯片的 HTML 代码:
我想在同一个页面放映两张幻灯片， 这是类似于我创建的东西的 fiddle : http://jsfiddle.net/55KBN/ 我可以运行第一个幻灯片放映但第二个不工作，当我单击第二个幻灯片放映控
我有一个问题这是我使用 javascript 的第一步，我正在尝试制作 Javascript 幻灯片。我尝试添加“滑入”“滑出”效果但我不知道该怎么做。我谷歌了大约2-3个小时，但仍然没有解决方案。请
我有一个幻灯片，当我将鼠标悬停在它上面时，它会向左移动。我想做的是，当我将鼠标放在左侧时，幻灯片会向左移动，但是当我将鼠标放在右侧时，幻灯片会向右移动。当我将鼠标放在中间时，它不会移动。不太清楚该怎么
我正在尝试创建一个无休止的图像幻灯片，其功能如下: 在窗口上滑动图像 到达最后一个图像时，将从图像的开头开始 这是我当前的代码: var direction = '-'; function doScr
看来Jquery Supersized目前只允许附加整个 body 的背景图片？是否可以使用 css 选择器来告诉他在哪里加载背景幻灯片？ 我尝试过类似的方法 $('#custom-div').sup
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
我发现了这个名为 Skitter 的神奇 jQuery 幻灯片。这很棒!所以我在我最新的项目中实现了它。是否可以更改两个图像之间的时间间隔。我在他们的网站和 javascript 文件中到处搜索。在
我在 jquery 循环幻灯片放映中有一个透明的 png。在翻转时，它从图像 A 淡入到 B。在鼠标移出时，它返回到 A。但是，它不会在之后的任何翻转中重复这种淡入淡出。对此有什么想法吗？谢谢
我是一名优秀的程序员,十分优秀！