轮播图

来源：互联网发布：淘宝店铺女装货源编辑：程序博客网时间：2024/06/16 08:11

最近看了自己以前写的轮播图，发现有重排的问题。用js重写了轮播图的简单实现方法：

<!DOCTYPE html><html><head><title>轮播图</title><meta charset="utf-8"><style type="text/css">#showImg{width: 70%;height:400px;margin: 0 auto;position: relative;}.image{width: 90%;height:400px;position: absolute;left: 0;top: 0;z-index: 0;opacity: 0;}.active{z-index: 1;opacity: 1;transition: opacity 2s ease-in-out;}@keyframes opacity{20%{opacity:0.2;}60%{opacity:0.4;}100%{opacity:0.6;}}#showSlide{height:20px;/*background: #AAA;*/position: absolute;left: 35%;top:90%;z-index: 100;opacity: 10;}.liSlide{display: inline-block;width:16px;height:16px;margin-left: 3px;list-style-type: none;border-radius: 8px;background-color: #AAA;}</style></head><body><div id="showImg"><div><img class="image active" src="./css图片/mukewang.jpg"><img class="image active" src="./css图片/mukewang.jpg"><img class="image" src="./css图片/SICLOGO.png"><img class="image" src="./css图片/Internet.jpg"></div><ul id="showSlide"></ul></div><!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>--><script type="text/javascript">var showImg=document.getElementById("showImg");var imgs=showImg.getElementsByTagName('img');var showSlide=document.getElementById('showSlide');for (var i = 0; i < imgs.length; i++) {var dot=document.createElement('span');dot.className="liSlide";showSlide.appendChild(dot);}var i=-1;var dots=showSlide.getElementsByTagName('span');dots[0].style.backgroundColor='#fff';for (let j = 0; j < dots.length; j++) {dots[j].onclick=function(){i=j;slide(i);}}setInterval(function(){if(i<imgs.length-1){i=i+1;slide(i);}else{i=-1;}},10000);function slide(i){for(let j=0;j<imgs.length;j++){if(j==i){imgs[j].classList.add("active");dots[j].style.backgroundColor='#fff';}else{imgs[j].classList.remove("active");dots[j].style.backgroundColor='#AAA';}}}</script></body></html>

阅读全文

0 0