<!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. Android控件postDelayed用法,View自带的定时器

    有一个需求是这样的,点击加关注按钮后,执行关注操作,成功后按钮文字变为“已关注”,保持3秒,三秒后按钮文字便问“取消关注”,点击后执行取消关注的操作 源码: public boolean postDe ...

  2. 关于iOS适配问题

    大家都知道在iOS开发当中对于UI适配问题可以从如下两个方面去考虑: 1.比例适配 2.利用autolayout自动布局 通常情况来说,利用auto自动布局是一个比较好的方案,开发者可以利用story ...

  3. SVN: repository browser 库浏览器

    SVN: repository browser  库浏览器 -----如果不想全部下载,可以通过repository browser  库浏览器 从库中选择要下载的文件夹内容下载(svn针对性下载)

  4. c# static 常量

    1 关键字 static 修饰 类  字段 属性 方法 ,标记static的就不用创建类的实例调用了,直接通过类名点出来 2 用于变量前,表示每次重新使用该变量所在的方法,类或者自定义的类时,变量的值 ...

  5. 函数响应式编程(FRP)从入门到”放弃”——基础概念篇

    前言 研究ReactiveCocoa一段时间了,是时候总结一下学到的一些知识了. 一.函数响应式编程 说道函数响应式编程,就不得不提到函数式编程,它们俩到底有什么关系呢?今天我们就详细的解析一下他们的 ...

  6. CentOS 7.4 安装 网易云音乐

    CentOS 7.4 安装 网易云音乐 本文包含: 安装dnf 编译gcc 5.4.0 安装各种包 安装网易云音乐贯穿全局; 安装环境: CentOS 7.4, kernel3.10.0, gcc4. ...

  7. 洛谷2863 [Usaco06JAN]牛的舞会

    题目描述 约翰的N (2 <= N <= 10,000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别 上鲜花,她们要表演圆舞. 只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一 ...

  8. 【Appium】每次启动是提示安装setting和unlock app的解决办法

    进入appium安装目录,C:\Program Files (x86)\Appium\node_modules\appium\lib\devices\android,编辑android.js文件,注释 ...

  9. 用typename和template消除歧义

  10. Unix网络编程之环境搭建

    环境搭建 在尝试UNP书上的样例时,会由于找不到"unp.h"等问题无法编译成功.因此在学习之前须要先搭建好编译环境. 步骤 <1>下载  UNIX网络编程源码unpv ...