<!DOCTYPE html><html><head><meta charset="utf-8"><title>轮播</title><style>* {box-sizing: border-box}body {font-family:Verdana,sans-serif}.mySlides {display:none;}/* 幻灯片容器 */.slideshow-container { max-width:1000px; position:relative; margin:auto;} .red { width:300px; height:200px; background-color:red;} .green { width:300px; height:200px; background-color:green;} .blue{ width:300px; height:200px; background-color:blue;} /* 上一张 & 下一张 按钮 */.prev , .next{ cursor:pointer; position:absolute; top:50%; width:auto; margin-top:-22px; padding:16px; color:white; font-weight:bold; font-size:18px; transition: 0.6s ease; border-radius: 0 5px 5px 0; }/* 定义 “下一张”按钮靠右 */.next { right:0; border-radius:5px 0 0 5px;}/* 当鼠标经过时，为按钮添加一个有透明度的背景 */.prev:hover, .next:hover { background-color:rgba(0,0,0,0.8)}/* 标题文本 */.text { color:#f2f2f2; font-size:15px; position:absolute; bottom:8px; width:100%; text-align:center;}/* 数字文本 */.numbertext { color:#f2f2f2; font-size:12px; padding:8px 12px; position:absolute; top:0;}/* 标记符号 */.dot { cursor:pointer; height:13px; width:13px; margin:0 2px; background-color:#bbb; border-radius:50%; display:inline-block; transition:background-color 0.6s ease;}.active, .dot:hover { background-color: #717171;}/* 淡入淡出 */.fade { -webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}@-webkit-keyframes fade { from {opacity:0.4} to {opacity:1}}@keyframe fade { from {opacity:0.4} to {opacity:1}}</style></head><body><div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <div class="red" style="width: 100%"></div> <div class="text">文本 1</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <div class="green" style="width: 100%"></div> <div class="text">文本 2</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <div class="blue" style="width: 100%"></div> <div class="text">文本 3</div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div><br/><div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span></div><script>var slideIndex=1;showSlides(slideIndex);function plusSlides(n){ showSlides(slideIndex += n);}function currentSlide(n){ showSlides(slideIndex = n);}function showSlides(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0;i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0;i <dots.length; i++) { dots[i].className = dots[i].className.replace(" active ", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active ";}</script></body></html>
添加回答
举报
0/150
提交
取消