zoukankan      html  css  js  c++  java
  • 轮换显示图片


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>越狱的囚徒</title>
    <style type="text/css">
    .content{
    border:3px solid red;
    padding:3px;
    500px;
    height:245px;
    position:relative;
    }
    .content img{
    border:0;

    }
    .content div{
    position:absolute;
    z-index:1000;
    border:2px solid green;
    padding:3px 5px;
    background:#ccc;
    }
    .content .cur{background:red;color:white;}//当前显示的图片的小方块,红色背景白色字体
    </style>
    <script type="text/javascript">
    var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg'];
    var i=0;
    var ob,obk;
    function lunhuan(){

    if(i>4){//数字大于4就从0开始
    i=0;
    }
    ob=document.getElementById("image1");
    ob.src=arr[i];
    //所有div-0到div-4,背景颜色置灰
    for(var j=0;j<=4;j++){
    document.getElementById("div-"+j).style.backgroundColor='#ccc';
    document.getElementById("div-"+j).style.color='black';
    }
    obk=document.getElementById("div-"+i);
    obk.style.backgroundColor='red';
    obk.style.color='white';
    i++;
    }
    </script>
    </head>
    <body onload="window.setInterval(lunhuan,1000);">
    <div class="content">
    <img id="image1" src="images/1.jpg"/>
    <div class="cur" id="div-0" style="top:215px;right:128px;">1</div>
    <div id="div-1" style="top:215px;right:98px;">2</div>
    <div id="div-2" style="top:215px;right:68px;">3</div>
    <div id="div-3" style="top:215px;right:38px;">4</div>
    <div id="div-4" style="top:215px;right:8px;">5</div>
    </div>
    <input type="button" value="test" onclick="lunhuan();"/>
    </body>
    </html>

  • 相关阅读:
    常见数据结构图文详解-C++版
    求单链表中环的起点,原理详解
    Qt Creator 整合 python 解释器教程
    Qt 共享库(动态链接库)和静态链接库的创建及调用
    qt creator 中的"提升为..."功能简介
    QT 操作 excel 教程
    网易2017校园招聘算法题c语言实现源码
    c语言版贪吃蛇小游戏
    mysql语法结构
    Spring MVC rest接收json中文格式数据显示乱码
  • 原文地址:https://www.cnblogs.com/tian114527375/p/4929554.html
Copyright © 2011-2022 走看看