JavaScript照片滑块 [英] JavaScript Photo Slider

查看:112
本文介绍了JavaScript照片滑块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在制作一个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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆