JQuery实现轮播图

一、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>

 

四、动态效果

 

posted @ 2025-01-27 17:17  白头吟  阅读(33)  评论(0)    收藏  举报