一、html代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div class="banner"><ul><li class="on"><img src="./images/banner01.jpg" alt=""></li><li><img src="./images/banner02.jpg" alt=""></li><li><img src="./images/banner03.jpg" alt=""></li><li><img src="./images/banner04.jpg" alt=""></li></ul><p class="prev iconfont icon-xiaoyu "></p><p class="next iconfont icon-dayu1"></p><ul><li class="on"><p class="iconfont icon-yuandian"></p></li><li><p class="iconfont icon-yuandian "></p></li><li><p class="iconfont icon-yuandian "></p></li><li><p class="iconfont icon-yuandian "></p></li></ul><div class="poster"><p>为健康生活保驾护航</p><p>万邦伊菲图新材料一直秉承的原则</p></div></div> </body> </html>
二、css样式
.banner,.cBanner{margin: 0 auto; } .banner>ul:first-of-type>li {height: 1020px;position: relative;display: none;overflow: hidden; } .banner>ul:first-of-type>li>img{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%); } .banner>ul:first-of-type>li.on {display: block; } .banner>p{position: absolute;display: block;font-size:46px;color:#fff;top:578px; } .banner>p.prev{left: 20px; } .banner>p.next{right: 20px; } .banner>ul:last-of-type{position: absolute;top:970px;left: 50%;transform: translateX(-50%); } .banner>ul:last-of-type>li{float: left; } .banner>ul:last-of-type>li>p{font-size: 30px;color:#ccc; } .banner>ul:last-of-type>li.on>p{color:aqua; }
三、js代码
<script src="./js/jquery-3.7.1.js"></script><script>$(function () {let index = 0;function getFocus(index) {$('.banner>ul:first-of-type>li').eq(index).addClass('on').siblings().removeClass('on');$('.banner>ul:last-of-type>li').eq(index).addClass('on').siblings().removeClass('on');}$('.banner>p.next').on('click', function () {index = index == 3 ? 0 : ++index;getFocus(index);});$('.banner>p.prev').on('click', function () {if (index == 0) {index = 3} else {index--;}getFocus(index);});let timeId = setInterval(function () {$('.banner>p.next').click();}, 1000);$('.banner').hover(function () {clearInterval(timeId);},function () {timeId = setInterval(function () {$('.banner>p.next').click();}, 1000)});</script>
四、动态效果
