简单的大图轮播 

<style type="text/css">
    *{margin:0px;auto
        padding:0px;
     }
     #top{width:100%;
             height:500px;
            position:relative;
            left:200px;
         }
    .img{
        display:none
        }
    #dian{
            width:200px;
            height:20px;
         }
    /*.d{
        float:left;
        width:20px;
        height:20px;
        border-radius:50%;
        border:1px solid #F00;
        background-color:#FFF;
        margin-left:10px;
        position:relative;
        
        left:500px
        }*/
        </style>
</head>

<body>
            <div id="top">
    <img class="img" style="display:block;" src="file:///C|/Users/Administrator/Desktop/新建文件夹/58PIC8n58PICf6J_1024.jpg"
    width="800px"; height="500px" />
    <img class="img" src="" />
    <img class="img" src="" />
    <img class="img" src="" />
    <img class="img" src="" />
</div>
<div id="dian">
  <div class="d" style=" background-color:#000;" onclick="Tiao('0')"></div>
  <div class="d" onclick="Tiao('1')"></div>
  <div class="d" onclick="Tiao('2')"></div>
  <div class="d" onclick="Tiao('3')"></div>
  <div class="d" onclick="Tiao('4')"></div>
</div>

<script type="text/javascript">
        var sy=0
        window.setInterval("Huan()",2000)
        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("d")    
            for(var j=0;j<d.length;j++)
            {
                d[j].style.backgroundColor ="#fff"
            }    
            d[sy].style.backgroundColor ="black"     
        }
            function Tiao(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("d");
            for(var j=0;j<d.length;j++)
            {
                d[j].style.backgroundColor = "#fff";
            }
            d[a].style.backgroundColor = "black";
        }
        
    </script>

 

posted on 2017-10-27 17:00  我是好孩子i  阅读(68)  评论(0)    收藏  举报

导航