幻灯片
实现幻灯片自动放映，左下角圆圈直接跳转到某张幻灯片。
如果想点击切换，请见web前端之幻灯片（一）
效果图
代码实现动图展示
html代码
<body><div class="show"><div class="myShow"><div class="number">1 / 4</div><img src="../image/huan1.jpg" alt=""><div class="text">introduction1</div></div><div class="myShow"><div class="number">2 / 4</div><img src="../image/huan2.jpg" alt=""><div class="text">introduction2</div></div><div class="myShow"><div class="number">3 / 4</div><img src="../image/huan3.jpg" alt=""><div class="text">introduction3</div></div><div class="myShow"><div class="number">4 / 4</div><img src="../image/huan4.jpg" alt=""><div class="text">introduction4</div></div><div class="dot_contain"><div class="dot" onmouseenter="currentShow(1)">1</div><div class="dot" onmouseenter="currentShow(2)">2</div><div class="dot" onmouseenter="currentShow(3)">3</div><div class="dot" onmouseenter="currentShow(4)">4</div></div></div></body>
css代码
<style>*{font-family: 微软雅黑;}.show{max-width: 1000px;position: relative;margin:auto;}.myShow{display: none;}img{width: 100%;}/*-------------------------------------------------------------------*//*文字部分s*/.text {color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;right: 8px;width: 50%;text-align: center;/*border:1px solid #000;*/}/*数字文字部分*/.number{color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}/*-------------------------------------------------------------------*//*幻灯片下方圆点*/.dot_contain{position:absolute;bottom:8px;text-align: center;}.dot{font-size: 10px;font-weight: bold;text-align: center;height: 20px;width: 20px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block;}.active, .dot:hover {background-color: #696969;}</style>
js代码
<script src="../jquery-1.11.3/jquery-1.11.3.min.js"></script><script>index = 0;show();function currentShow(n) {show(index = n-1);}function show() {//获取到classshows=$('.myShow');dots=$('.dot');//获取到幻灯片长度-----即幻灯片个数length=shows.length;//获取到幻灯片下方圆圈个数dotLength=dots.length;for (i = 0; i < length; i++) {shows[i].style.display = "none"; }index++;if (index > length) {index = 1;}for (i = 0; i < dotLength; i++) {dots[i].className = dots[i].className.replace(" active", "");}shows[index-1].style.display = "block"; dots[index-1].className += " active";setTimeout(show, 2000); // 切换时间//切换时间可根据自己喜欢调节}</script>
☺️
如果觉得《web前端之幻灯片（二）--自动播放》对你有帮助，请点赞、收藏，并留下你的观点哦！
