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/

相关文章:

jquery - 使用带有 ajax 加载内容的 jquery Bootstrap 模式时加载 jQuery select2 时出错

javascript - 将 JSON 值从 JavaScript 传递到 JSP

javascript - 测量两个形状之间的距离

javascript - 如何解析 "Uncaught ReferenceError: google is not defined"? (谷歌地图 API)

javascript - jQuery CSS 选择器结合 "this"

jquery - IosSlider 图像在初始页面加载时垂直(或分散)加载

javascript - 根据div的内容左右滑动div?

javascript - 给定另外两个点和标题确定点

javascript - 焦点是否触发 keyup 事件?

javascript - 在 .html() 标签内格式化 html