JavaScript 照片 slider

标签 javascript jquery

我正在制作一个 JS 脚本,它将进入标题 div 并显示一些图片。我查看了 JQuery Cycle,但它超出了我的范围。我在下面编写的代码卡住了浏览器,我应该使用带有计时器变量的 for 循环吗?

<script type="text/JavaScript" language="JavaScript">
var timer;
for (timer = 0; timer < 11; timer++) {
    if (timer = 0) { 
    document.write('<img src="images/one.png">');
    }

    if (timer = 5) {
    document.write('<img src="images/two.png">');
    } 

    if (timer = 10) {
    document.write('<img src="images/three.png">');
    } 
}   
</script>

谢谢!

最佳答案

假设您想要一个脚本来旋转图像,而不是像您的代码那样将它们写入页面,您可以使用这样的东西:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>
<div id="target"></div>
<script>
var ary = ["images/one.png","images/two.png","images/three.png"];
var target = document.getElementById("target");
setInterval(function(){
    target.innerHTML = "<img src=\""+ary[0]+"\" />";
    ary.push(ary.shift());
},2000);
</script>

</body>
</html>

当然,上面的代码没有 jQuery 会给你的效果(比如淡入淡出),但它也不需要为如此基本的东西加载整个 jQuery 库。

关于JavaScript 照片 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8716004/

相关文章:

javascript - 将 promise 项替换为数组中已实现的值

jquery - 为什么这个简单的 jQuery 切换不起作用?

javascript - 以样式格式选择所有或部分父/子复选框

jquery - 如何使用 jQuery 选择非直接左兄弟 <span> ?

javascript - 未触发可排序句柄

javascript - Google Calendar API - 使用 Javascript 在另一个用户的日历中插入事件

javascript - 内联与可观察数组的绑定(bind)

javascript - 更改 div 元素的背景颜色循环淡入淡出

jquery - 如果页面高度动态变化,带 id 的链接不起作用

jquery - jquery 拖动停止后 chrome 中的表格边框问题