JavaScript照片滑块 [英] JavaScript Photo Slider
问题描述
我正在制作一个JS脚本,该脚本将放在标头div中并显示一些图片.我调查了JQuery Cycle,但超出了我的范围.我在下面编写的代码冻结了浏览器,我应该在定时器var中使用for循环吗?
I'm working on making a JS script that will go in the header div and display a few pictures. I looked into JQuery Cycle, but it was out of my league. The code I wrote below freezes the browser, should I be using the for loop with the timer var?
<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>
谢谢!
推荐答案
假设您希望脚本旋转图像,而不仅仅是像代码那样将其写入页面,则可以使用以下方法:
Assuming you want a script to rotate images and not just write them to the page as your code will do, you can use something like this:
<!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库.
Of course the above code has no effects (like fading) which jQuery will give yous, but it also doesn't require loading the entire jQuery library for something so basic.
这篇关于JavaScript照片滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!