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">
    #tupian{ width:184px; height:279px;}
    .tu{ display:none;}
    #yuan{ width:200px; height:20px;}
    .yuan1{width:15px; height:15px; border:2px solid #00F; float:left; margin-left:10px;border-radius:100px; background-color:#FFF}
    .yuan1:hover{ cursor:pointer}
    
    
    
    </style>
    </head>
    
    <body>
    
    <div id="tupian">
        <img style="display:block" class="tu" src="../110/冰霜奇迹(www.10088mu.com)奇迹私服,千人在线,特色奇迹,玩家赚钱的奇迹私服_files/r2.jpg"/>
        <img class="tu" src="../110/冰霜奇迹(www.10088mu.com)奇迹私服,千人在线,特色奇迹,玩家赚钱的奇迹私服_files/img3.jpg"/>
        <img class="tu" src="../110/冰霜奇迹(www.10088mu.com)奇迹私服,千人在线,特色奇迹,玩家赚钱的奇迹私服_files/r3.jpg"/>
        <img class="tu" src="../110/冰霜奇迹(www.10088mu.com)奇迹私服,千人在线,特色奇迹,玩家赚钱的奇迹私服_files/r4.jpg"/>
        <img class="tu" src="../110/冰霜奇迹(www.10088mu.com)奇迹私服,千人在线,特色奇迹,玩家赚钱的奇迹私服_files/r5.jpg"/>
        <img class="tu" src="../110/冰霜奇迹(www.10088mu.com)奇迹私服,千人在线,特色奇迹,玩家赚钱的奇迹私服_files/r6.jpg"/>
    </div>
    <br />
    <div id="yuan">
    <div ba="0" class="yuan1" onclick="xianshi(this,'0')"></div>
    <div ba="1" class="yuan1" onclick="xianshi(this,'1')"></div>
    <div ba="2" class="yuan1" onclick="xianshi(this,'2')"></div>
    <div ba="3" class="yuan1" onclick="xianshi(this,'3')"></div>
    <div ba="4" class="yuan1" onclick="xianshi(this,'4')"></div>
    <div ba="5" class="yuan1" onclick="xianshi(this,'5')"></div>
    </div>
    </body>
    </html>
    <script type="text/jscript">
    
    
    
    var sy = 0;
    
    window.setInterval("LunBo()",1000);
    
    function LunBo()
    {
        var tu = document.getElementsByClassName("tu");
         
         sy++;
         
         
        if(sy>=tu.length)
        {
            sy=0;    
        }
        for(var i=0;i<tu.length;i++)
        {
            tu[i].style.display = "none";    
        }
        
        tu[sy].style.display = "block";
    
        var yuan = document.getElementsByClassName("yuan1");
        
        for(var j=0;j<yuan.length;j++)
        {
            if(yuan[j].getAttribute("ba")==sy)
            {
                yuan[j].style.borderColor = "green";
            }
            else
            {
                yuan[j].style.borderColor = "red";
            }
        }
    }
    
    /*var sy = 0;
    
    //间隔调用
    window.setInterval("Huan()",3000);
    
    //调一下换一个
    function Huan()
    {
        var img = document.getElementsByClassName("tu");
        sy++; //索引加1
        
        //判断是否到了最后一张
        if(sy>=img.length)
        {
            sy=0;
        }
        
        //让所有隐藏
        for(var i=0;i<img.length;i++)
        {
            img[i].style.display="none";
        }
        //让下一张显示
        img[sy].style.display="block";
        
        //换圆点的样式
        var yuan = document.getElementsByClassName("yuan1");
        
        for(var j=0;j<yuan.length;j++)
        {
            if(yuan[j].getAttribute("ba")==sy)
            {
                yuan[j].style.borderColor = "green";
            }
            else
            {
                yuan[j].style.borderColor = "red";
            }
        }
    }*/
    
    function xianshi(t,s)
    {
        sy=s;
        
        var img = document.getElementsByClassName("tu");
        //让所有隐藏
        for(var i=0;i<img.length;i++)
        {
            img[i].style.display="none";
        }
        //让下一张显示
        img[s].style.display="block";
        
        //改自身样式
        var yuan = document.getElementsByClassName("yuan1");
        
        for(var j=0;j<yuan.length;j++)
        {
            yuan[j].style.borderColor="red";
        }
        
        t.style.borderColor="green";
    }
    </script>
  • 相关阅读:
    js获取客户端IP及地理位置
    跟SAP系统集成的Android应用
    关于刘冬大侠Spring.NET系列学习笔记3的一点勘正
    设置浏览器全屏模式
    一个模拟"显示桌面.scf"程序的JS小函数
    网站整体变灰(黑白、置灰)原理
    苹果手机上input的button按钮颜色显示问题
    用Python做数据清洗:采集几百个xls或csv中的数据并汇总
    用ISO-8859-1解决Python 'utf-8' codec can't decode bytes in position 924-925问题
    Python批量转换子文件夹下的文件编码
  • 原文地址:https://www.cnblogs.com/chaochao00o/p/6287003.html
Copyright © 2011-2022 走看看