zoukankan      html  css  js  c++  java
  • 4.8 大图轮播

    <!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">
                #tu{
                    700px;
                    height:500px;
                    float:left;
                    }
                .img{
                    display:none;}
                #yuandian{
                    500px;
                    height:20px;
                    margin-top:450px;
                    margin-left:-200px;
                    float:left;}
                .dian{
                    20px;
                    height:20px;
                    border:5px solid red;
                    border-radius:50%;
                    float:left;
                    margin-left:10px;
                    
                    }
            </style>
        </head>
        
        <body>
            <div id="tu">
                <img class="img" style="display:block" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="700" height="500" />
                <img class="img" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" width="700" height="500" />
                <img class="img" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="700" height="500" />
                <img class="img" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="700" height="500" />
                <img class="img" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="700" height="500" />
            </div>
            <div id="yuandian">
                <div sy="0" class="dian" style="border-color:blue" onclick="Xuan(this,'0')"></div>
                <div sy="1" class="dian" onclick="Xuan(this,'1')"></div>
                <div sy="2" class="dian" onclick="Xuan(this,'2')"></div>
                <div sy="3" class="dian" onclick="Xuan(this,'3')"></div>
                <div sy="4" class="dian" onclick="Xuan(this,'4')"></div>
                
            </div>
        </body>
        
        <script type="text/javascript">
            window.setInterval("Huan()",1000);
            var sy = 0;
            function Huan()
            {
                var img = document.getElementsByClassName("img");    
                sy++;
                //限制条件:走到最后一张,跳到第一张继续
                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 d = document.getElementsByClassName("dian");
                for(var j=0;j<d.length;j++)
                {
                    //判断属性值和索引是不是相等
                    //获取属性
                    if(d[j].getAttribute("sy")==sy)
                    {
                        //相等的话边框颜色变色    
                        d[j].style.borderColor = "blue";    
                    }
                    else
                    {
                        //不相等的话还是原来的颜色
                        d[j].style.borderColor = "red";        
                    }    
                }
            }
            
            function Xuan(t,a)
            {
                sy = a;
                var img = document.getElementsByClassName("img");
                for(var i=0;i<img.length;i++)
                {
                    img[i].style.display = "none";    
                }    
                img[a].style.display = "block";
                var d = document.getElementsByClassName("dian");
                for(var j=0;j<d.length;j++)
                {
                    d[j].style.borderColor = "red";    
                }
                t.style.borderColor = "blue";
            }
        </script>
    </html>

    这个效果就可以选择图片中的小框即可浏览图片,而且颜色随着图片的变化而变化。

  • 相关阅读:
    PAT (Advanced Level) Practice 1100 Mars Numbers (20分)
    PAT (Advanced Level) Practice 1107 Social Clusters (30分) (并查集)
    PAT (Advanced Level) Practice 1105 Spiral Matrix (25分)
    PAT (Advanced Level) Practice 1104 Sum of Number Segments (20分)
    PAT (Advanced Level) Practice 1111 Online Map (30分) (两次迪杰斯特拉混合)
    PAT (Advanced Level) Practice 1110 Complete Binary Tree (25分) (完全二叉树的判断+分享致命婴幼儿错误)
    PAT (Advanced Level) Practice 1109 Group Photo (25分)
    PAT (Advanced Level) Practice 1108 Finding Average (20分)
    P6225 [eJOI2019]异或橙子 树状数组 异或 位运算
    P4124 [CQOI2016]手机号码 数位DP
  • 原文地址:https://www.cnblogs.com/F9801/p/8744203.html
Copyright © 2011-2022 走看看