例题：大图轮播

时间：2018-04-14 18:05:05 阅读：186 评论：0 收藏：0 [点我收藏+]

标签：att doc == ack height isp interval lock span

大图轮播

图片轮播

<!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{
                width:700px;
                height:500px;
                float:left;
                }
            .img{
                display:none;}
        
            
        </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>
    </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";
            
        
        }
        
    </script>
</html>

加入原点

<!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{
                width:700px;
                height:500px;
                float:left;
                }
            .img{
                display:none;}
            #yuandian{
                width:500px;
                height:20px;
                margin-top:450px;
                margin-left:-200px;
                float:left;}
            .dian{
                width: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"></div>
            <div sy="1" class="dian"></div>
            <div sy="2" class="dian"></div>
            <div sy="3" class="dian"></div>
            <div sy="4" class="dian"></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";        
                }    
            }
        }
        
    </script>
</html>

例题：大图轮播

标签：att doc == ack height isp interval lock span

原文地址：https://www.cnblogs.com/r6688/p/8832951.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行