本文共 1176 字，大约阅读时间需要 3 分钟。
| <style type="text/css"> |
| | *{ |
| | margin:auto; |
| | padding:0px;} |
| | #datu{ |
| | width:600px; |
| | height:400px;} |
| | .tu{ |
| | display:none;} |
| | #kuang{ |
| | width:600px; |
| | height:20px; |
| | z-index:1; |
| | position:absolute; |
| | top:385px; |
| | left:385px;} |
| | .dian{ |
| | width:10px; |
| | height:10px; |
| | border-radius:50%; |
| | border:1px solid #F00; |
| | float:left;} |
| | </style> |
| | </head> |
| | |
| | <body> |
| | <div id="datu"> |
| | <img class="tu" src="" width="600px" height="400px" style="display:block;" /> |
| | <img class="tu" src="" width="600px" height="400px" /> |
| | <img class="tu" src="" width="600px" height="400px" /> |
| | </div> |
| | |
| | <div id="kuang"> |
| | <div class="dian" x="0" style="background-color:blue;"></div> |
| | <div class="dian" x="1"></div> |
| | <div class="dian" x="2"></div> |
| | </div> |
| | </body> |
| | </html> |
| | <script type="text/javascript"> |
| | window.setInterval("Tu()",1000) |
| | var x =0; |
| | function Tu() |
| | { |
| | var t =document.getElementsByClassName("tu"); |
| | x++; |
| | if(x>=t.length) |
| | { |
| | x=0; |
| | } |
| | for(var i=0;i<t.length;i++) |
| | { |
| | t[i].style.display="none"; |
| | } |
| | |
| | t[x].style.display="block"; |
| | |
| | var d =document.getElementsByClassName("dian"); |
| | for(var j=0;j<d.length;j++) |
| | { |
| | if(d[j].getAttribute("x")==x) |
| | { |
| | d[j].style.backgroundColor="blue"; |
| | } |
| | else |
| | { |
| | d[j].style.backgroundColor="red" |
| | } |
| | } |
| | } |
转载于:https://www.cnblogs.com/wzs9/p/8743214.html