实现左右点击切换，左下角圆圈直接跳转到某张幻灯片。
<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><a class="prev">❮</a><a class="next">❯</a></div><br>
</body>
<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;}
/*-------------------------------------------------------------------*//*左右切换*/.prev,.next{cursor: pointer;position:absolute;top:50%;margin-top: -22px;padding: 16px;border-radius: 0 3px 3px 0;color: #000;font-size: 50px;font-weight: bold;}.next{right:0px;}.prev:hover, .next:hover {background-color:#DCDCDC;opacity: 0.3;}
/*-------------------------------------------------------------------*//*幻灯片下方圆点*/.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>
<script src="../jquery-1.11.3/jquery-1.11.3.min.js"></script><script>index = 1;show(index);function changeShow(n) {show(index += n);}function currentShow(n) {show(index = n);}function show(n) {//根据class名获取到shows和dotsshows=$('.myShow');dots =$('.dot');//获取到幻灯片长度-----即幻灯片个数length=shows.length;//获取到幻灯片下方圆圈个数dotLength=dots.length;//如果向后走到最后一张幻灯片时，则将index=1-----即切换到第一张幻灯片if (n > length) {index = 1;}else if (n < 1) {//如果向前走到第一张幻灯片时，则将index=length-----即切换到最后一张幻灯片index = length;}for (i = 0; i < length; i++) {shows[i].style.display = "none"; }for (i = 0; i < dotLength; i++) {dots[i].className = dots[i].place("active", "");}shows[index-1].style.display = "block"; dots[index-1].className += " active";}$('.prev').click(function(){changeShow(-1);});$('.next').click(function(){changeShow(1);});
</script> ☺️
本文发布于:2024-02-04 15:41:51，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170710796256784.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
