一下是案例代码,可以根据自己的需要再次修改。
<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和dots shows=$('.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].className.replace("active", ""); } shows[index-1].style.display = "block"; dots[index-1].className += " active"; } $('.prev').click(function(){ changeShow(-1); }); $('.next').click(function(){ changeShow(1); }); </script>
上一篇:女性化的Geisha巧克力设计
下一篇:优秀设计精选集
业界动态
关联推荐