• 轮播效果


    <style type="text/css">
            .img{display:none;}
            #dian{ 300px; height:20px; position:relative;  top:-30px; left:400px }
            .yuan{20px; height:20px; background-color:#FFF; border:2px solid #0F6; border-radius:100px; float:left; margin-left:10px}
             
        </style>
        </head>
         
     
        <body>
            <div style="600px; height:300px;">
                <img style=" display:block;" class="img" src="file:///C|/Users/pc/Pictures/79077653_1.jpg"  width="600px" height="300"/>
                <img class="img" src="file:///C|/Users/pc/Pictures/2009040622372519.jpg" width="600px" height="300" />
                <img class="img" src="file:///C|/Users/pc/Pictures/373957f8f23c4023a2705e385861740a.jpg"  width="600px" height="300" />
                <img class="img" src="file:///C|/Users/pc/Pictures/140-16011Q52512.jpg"  width="600px" height="300"/>
                <img class="img" src="file:///C|/Users/pc/Pictures/140-150QZU313.jpg" width="600px" height="300" />
            </div>
             
             
            <div id="dian">
                <div bs="0" class="yuan" onclick="xianshi(this,'0')"></div>
                <div bs="1"  class="yuan" onclick="xianshi(this,'1')"></div>
                <div bs="2"  class="yuan" onclick="xianshi(this,'2')"></div>
                <div bs="3"  class="yuan" onclick="xianshi(this,'3')"></div>
                <div bs="4" class="yuan" onclick="xianshi(this,'4')"></div>
                 
            </div>
        </body>
     
     
        <script type="text/javascript">
        //图片索引
        var sy=0;
        //间隔时间
        window.setInterval("Huan()","4000");
            //掉一下换一个
            function Huan()
            {
            var img=document.getElementsByClassName("img");
            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("yuan");
                 
            for(var j=0;j<yuan.length;j++)
            {
                if(yuan[j].getAttribute("bs")==sy)
              {
               yuan[j].style.borderColor = "red";
              }
            else
               {
                  yuan[j].style.borderColor = "#0F6";
               }
                 }
            }
             
            function xianshi(t,s)
            {   
                sy=s;
                var img = document.getElementsByClassName("img");
                //让所有隐藏
                for(var i=0;i<img.length;i++)
                {
                    img[i].style.display="none";
                }
                //让下一张显示
                img[s].style.display="block";
                //改自身样式
                var yuan = document.getElementsByClassName("yuan");
                 
                for(var j=0;j<yuan.length;j++)
                {
                    yuan[j].style.borderColor="#0F6";
                }
                 
                t.style.borderColor="red";
            }
             
        </script>

  • 相关阅读:
    word2vec层次化softmax理解
    python动态加载模块,并获取模块中的类与方法(类似反射)
    用Python装饰器给函数自动加上try except
    3D打印第二弹:狗牌
    【高等代数】06
    【高等代数】05
    沙箱-guacamole
    关于写博客的一点思考
    二阶段目标检测总结
    Waymo object detect 2D解决方案论文拓展
  • 原文地址:https://www.cnblogs.com/aqxss/p/6180434.html
Copyright © 2020-2023  润新知