<!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. What are the differences between WebAPI and WebAPI 2

    http://stackoverflow.com/questions/21298961/what-are-the-differences-between-webapi-and-webapi-2 Maj ...

  2. Java数组与栈内存、堆内存

    package ch4; /** * Created by Jiqing on 2016/11/9. */ public class ArrayInRam { public static void m ...

  3. 可变对象 vs 不可变对象（Python）

    Python 在 heap 中分配的对象分成两类:可变对象和不可变对象.所谓可变对象是指,对象的内容是可变的,例如 list.而不可变的对象则相反,表示其内容不可变. 不可变对象:int,string ...

  4. 47.使用 RequireJS 加载 AngularJS

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 目前的版本没有遵循 Javascript 约定的 AMD 模块化规范, 因此使用 Requ ...

  5. Lists and strings

    A string is a sequence of characters and a list is a sequence of values, but a list of characters is ...

  6. hbase伪分布安装配置

    hbase1.2.4 伪分布式安装   注意:在安装hbase或者hadoop的时候,要注意hadoop和hbase的对应关系.如果版本不对应可能造成系统的不稳定和一些其他的问题.在hbase的lib ...

  7. Java类和对象11

    首先,编写一个类ChongZai,该类中有3个重载的方法void print():其次,再编写一个主类来测试ChongZai类的功能. public class ChongZai { public v ...

  8. 验证备份集-使用DBVERIFY工具

    DBVERIFY确认备份集是否存在坏块 验证TEST03.DBF 文件的是否存在坏块 C:\Documents and Settings\Administrator>dbv file=D:\or ...

  9. Android项目实战（五十七）：Glide 高斯模糊效果

    核心需要高斯模糊的库 compile 'jp.wasabeef:glide-transformations:2.0.1' 针对于3.7的版本 使用方法为: //加载背景, Glide.with(Mus ...

  10. 《剑指offer》树的子结构

    一.题目描述 输入两颗二叉树A,B,判断B是不是A的子结构. 二.输入描述 输入两棵树A,B. 三.输出描述 判断B是不是A的子结构,是返回true,否则返回false. 四.牛客网提供的框架 /* ...