<!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. bzoj1001: [BeiJing2006]狼抓兔子（初识是你最小割）

    1001: [BeiJing2006]狼抓兔子 题目:传送门 题解: 听说这题当初是大难题...可惜当年没有网络流hahahha 现在用网络流的思想就很容易解决了嘛 给什么连什么,注意是双向边,然后跑 ...

  2. thinkphp5项目--个人博客（一）

    thinkphp5项目--个人博客(一) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  3. 远程登录工具 —— filezilla（FTP vs. SFTP）、xshell、secureCRT

    filezilla:是一个免费开源的 FTP 软件,分为客户端版本和服务器版本,具备所有的 FTP 软件功能. 支持的协议:FTP & SFTP(Secure File Transfer Pr ...

  4. git 和github 关联

    创建本地仓库: 查看本地仓库配置信息: 如果没有配置,则进行配置: git config --global user.name "这里换上你的用户名" git config --g ...

  5. 洛谷1525 关押罪犯NOIP2010 并查集

    问题描述 S城现有两座监狱,一共关押着N名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示某两 ...

  6. luogu P3157 [CQOI2011]动态逆序对（CDQ分治）

    题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...

  7. 【BZOJ 1045】 [HAOI2008] 糖果传递

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 思路来自hzwer.. 设xi表示第i个人往左传递了xi个糖果. (如果小于0表示旁边的人给他了糖果. 则ans=∑|xi| 最后所 ...

  8. 【转】 基于C#.NET的高端智能化网络爬虫

    [转] 基于C#.NET的高端智能化网络爬虫 前两天朋友发给我了一篇文章,是携程网反爬虫组的技术经理写的,大概讲的是如何用他的超高智商通过(挑衅.怜悯.嘲讽.猥琐)的方式来完美碾压爬虫开发者.今天我就 ...

  9. 四 过滤模式 map Only - 作业完成 bloomFilter、top10、去重

    第四部分所有的模式涉及一个共同点: 不会改变原有的记录. 这些模式都是寻找数据子集的,不管结果集的规模是小(top10)还是大(像去重结果). 与第三部分差异是,他们通过对数据的相思子端坐概要与分组来 ...

  10. FPGA主要应用

    FPGA主要应用: 1.逻辑控制(逻辑接口领域) 传统方向,主要用于通信设备的高速接口电路设计,用FPGA处理高速接口的协议,并完成高速的数据收发和交换.FPGA最初以及到目前最广的应用就是在通信领域 ...