<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title></title>

<style  type="text/css" >

a  { text-decoration:none; color:blue;}

#div1 {  width:400px; height:298px; background-color:Blue; overflow:hidden; position:absolute; top:50px; left:40px;}

#div2 {  filter: alpha(opacity=50); width:400px; height:20px; color:Orange; background-image: url('img/bg.jpg'); background-repeat:repeat-x;  position:absolute; left:40px;  top :330px; }

#div3 {  width:400px; height:20px; color:Blue;   background-color:yellow; position:absolute; left:40px;  top :350px; }

img   {  filter: alpha(opacity=100); width:400px; height:300px;}

#div2 span{ cursor:pointer;}

</style>

<script type="text/javascript" src="my_js.js"></script>

<script type="text/javascript" language="javascript">

    //初始化图片

    var img_Array = new Array();

    for (var i = 0; i < 4; i++) {

        img_Array[i] = new Image();

    }

    img_Array[0].src = "img/1.jpg";

    img_Array[0].text = "<a href='http://www.baidu.com'>这是第1个</a>";

    img_Array[0].index = 1;

    img_Array[1].src = "img/2.jpg";

    img_Array[1].text = "这是第2个";

    img_Array[1].index = 2;

    img_Array[2].src = "img/3.jpg";

    img_Array[2].text = "这是第3个";

    img_Array[2].index = 3;

    img_Array[3].src = "img/4.jpg";

    img_Array[3].text = "这是第4个";

    img_Array[3].index = 4;

    //初始化时赋值，加入事件

    window.onload = function () {

        var j = 0;

        var timer = null;

        var oimg = document.getElementById("img1");

        var odiv_txt = document.getElementById("div3");

        oimg.src = img_Array[0].src;

        odiv_txt.innerHTML = img_Array[0].text;

        timer = setInterval(function () {

            auto(j++);

            if (j >= 3) { j = -1; }

        }, 3000);

        var ospans = document.getElementsByTagName("span");

        for (var i = 0; i < ospans.length; i++) {

            ospans[i].index = i;

            ospans[i].onmouseover = function () { this.style.backgroundColor = "black"; }

            ospans[i].onmouseout = function () { this.style.backgroundColor = ""; }

            ospans[i].onclick = function () {

                oimg.src = img_Array[this.index].src;

                odiv_txt.innerHTML = img_Array[this.index].text;

                clearInterval(timer);

                j = this.index>=3?

-1:this.index;

                timer = setInterval(function () {

                    auto(j++);

                    if (j >= 3) { j = -1; }

                }, 3000);

            }

        }

    }

    function auto(index) {

        var oimg = document.getElementById("img1");

        var odiv_txt = document.getElementById("div3");

        oimg.src = img_Array[index + 1].src;

        odiv_txt.innerHTML = img_Array[index + 1].text;

    }

</script>

</head>

<body >

<div  id="div1">

    <img id="img1" alt="" src="" />

    </div>

    <div id="div2" align="right">

   <span>  1   </span>

   <span>  2   </span>

    <span>  3   </span>

    <span>  4   </span> </div>

   <div id="div3" align="center">

</div>

</body>

</html>

js 图片轮转的更多相关文章

  1. 经常用的Jquery图片轮转

    1.HTML结构 <div class="main_view">                 <div class="window"> ...

  2. salesforce 零基础学习（六十一）apex:component简单使用以及图片轮转播放的实现

    有的时候,我们项目有可能有类似需求:做一个简单的图像轮转播放功能,不同的VF页面调用可以显示不同的图片以及不同的图片描述.这种情况,如果在每个页面单独处理相关的图像轮转播放则显得代码特别冗余,此种情况 ...

  3. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  4. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  5. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  6. JS图片延迟加载分析及简单的demo

    JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...

  7. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  8. js图片实时加载

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所 ...

  9. js 图片无缝循环

    <html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> ...

随机推荐

  1. 用LogParser分析Windows日志

    用LogParser分析Windows日志 实战案例分享 假设你已具有上面的基础知识,那么以下为你准备了更加深入的应用操作视频(从安装到使用的全程记录): http://www.tudou.com/p ...

  2. sql server management studio 快速折叠object explorer中的instance

    https://social.msdn.microsoft.com/Forums/sqlserver/en-US/6e20fa7a-c0a9-496b-89b2-19c6bd996ffc/how-to ...

  3. 使用Chrome浏览器，让我们远离（所有）广告

    你是否还在为浏览网页时各种广告霸屏而急躁不安?这里分享一个小技巧,如何自动屏蔽各大广告. 这里使用的浏览器是Chrome,直接在Chrome网上应用商店搜索下载安装AdBlock插件(不知道其它浏览器 ...

  4. vmware fusion8 序列号

  5. Android studio树形

    原创作品,允许转载,转载时请务必声明作者信息和本声明.  http://www.cnblogs.com/zhu520/p/8349553.html 这个是上网找了好久才弄出来的,我把我上网找的总结也写 ...

  6. ECNUOJ 2615 会议安排

    会议安排 Time Limit:1000MS Memory Limit:65536KB Total Submit:451 Accepted:102 Description 科研人员与相关领域的国内外同 ...

  7. Android-Volley网络通信框架（StringRequest &amp; JsonObjectRequest）

    1.回想 上篇对 Volley进行了简介和对它的学习目的与目标,最后,为学习Volley做了一些准备 2.重点 2.1 RequestQueue 请求队列的建立 2.2 学习 StringReques ...

  8. 理解ThreadLocal类

    1 ThreadLocal是什么 早在JDK 1.2的版本号中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路. 使用这个工具类能够 ...

  9. Nios II 系统时钟timestamp的应用

    在用Nios II做外设时序驱动的时候,经常会用延时函数.有时会常使用某个FPGA芯片和时钟,比如笔者一直使用的芯片是cyclone系列 EP2C35F484C8N,PLL输入SOPC时钟是50M.因 ...

  10. SOAPUI使用

    简介:在开发接口的时候每次验证接口是否正确都需要手动写测试DEMO来验证,使用SOAPUI可以大大减少测试时间. 目录 1.SOPUI介绍... 1 2.SOAPUI使用... 1 2.1新建SOAP ...