<!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. poj_3468,线段树成段更新

    参考自http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #include& ...

  2. Django是什么

    Django是什么 Django是什么? 是基于python语言的优秀的web开发框架.很多有名的网站比如youtube就是用django开发的. Python写的开源Web应用框架, 快速搭建blo ...

  3. Laravel-错误调试与记录日志

    Laravel-错误调试与记录日志 标签(空格分隔): php 错误调试 配置 修改/config/app.php 'debug' => env('APP_DEBUG', true), 开启de ...

  4. channels2.X 学习笔记

    - No module named 'asgiref.sync' 报错解决: # 报错原因: """ django版本过低, 卸载最新版本的 channels 使用2.x ...

  5. BZOJ 2342 Manacher

    思路: 首先用manacher可以求出以i和i+1中间为对称轴,最长回文串能扩增的长度p[i]. 然后4*(y-x)能更新答案,当且仅当y≤x+p[x]/2且y-p[y]≤x. 按i-p[i]将所有点 ...

  6. php生成无限栏目树

    栏目数组:$arr=Array( Array('cid' => 2,'cname' => '新闻','pid' => 0),    Array('cid' => 4,'cnam ...

  7. PostgreSQL Replication之第三章 理解即时恢复（2）

    3.2 归档事务日志 看过图片之后,我们可以看看如何使这些东西进入工作状态.当谈到及时归档时,您需要做的第一件事是归档XLOG.PostgreSQL通过postgresql.conf提供了所有与归档相 ...

  8. vue实现文字上下滚动

    实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果, 相关的dom内容 <template> ...

  9. 【Fiddler】使用fiddler抓取指定浏览器的包

    参考资料:http://blog.csdn.net/sufubo/article/details/49331705 使用fiddler抓取不到浏览器的包时常用的解决办法: 1.必须先打开Fiddler ...

  10. Android 连接网络数据库的方式

    以连接MS SQL(sqlserver数据库)的网络数据库为例,从当前搜集的资料来看,一共有两种方式:在Android工程中引入JDBC驱动,直接连接:通过WebService等方法的间接连接. 采用 ...