轮播图+懒加载+顶定固定菜单

Posted 2020-12-14 rovedog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图+懒加载+顶定固定菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font: 1rem "micro-soft Yahei";
        }

        a {
            text-decoration: none;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .play-box {
            position: relative;
            width: 865px;
            height: 535px;
            border: 1px solid #ccc;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-right: none;
        }

            .play-box a {
                opacity: 0;
                height: 0;
                overflow: hidden;
                display: block;
                transition: opacity 1s;
            }

                .play-box a span {
                    position: absolute;
                    font-size: 1.5rem;
                    color: bisque;
                    opacity: 0.6;
                    padding-left: 20px;
                    padding-top: 20px;
                }

                .play-box a.current {
                    opacity: 1;
                    height: auto;
                }

            .play-box img {
                width: 865px;
                height: 535px;
                border: 0;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }

        #iconList {
            position: absolute;
            left: 50%;
            bottom: 10px;
            margin-left: -45px;
        }

            #iconList li {
                float: left;
                margin: 0 4px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                font-size: 0;
                background-color: #fff;
                cursor: pointer;
            }

                #iconList li.current {
                    background: linear-gradient(to bottom, #f8f8f8 0,lawngreen 80%);
                }

        .slidebar {
            position: absolute;
            display: none;
            top: 50%;
            margin-top: -35px;
            width: 30px;
            height: 50px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: #000;
            opacity: .6;
            cursor: pointer;
            font-family: simsun;
        }

        .slidebar_left {
            left: 0;
        }

        .slidebar_right {
            right: 0;
        }

        #imgContent, #materials {
            display: flex;
            justify-content: center;
            margin: 60px auto;
            color: #666;
        }


        #title {
            height: auto;
            width: 535px;
            text-align: left;
            padding-left: 20px;
            border: 1px solid #ccc;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
            border-left: none;
        }

            #title ul {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 100%;
            }

                #title ul li a {
                    text-decoration: none;
                }

                #title ul li.current {
                    padding-left: 18px;
                    color: #000;
                    text-decoration: underline #fefce6 dashed;
                    background: url(/images/arrow_blue_right.png) left no-repeat;
                }

        h2 {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 0;
            margin: 0;
            font-weight: normal;
        }

        hr {
            color: #ccc;
        }

        #category {
            font-size: 1.2rem;
        }

        .footer {
            text-align: right;
            margin-top: 20px;
            margin-right: 200px;
            color: navy;
            height: 50px;
            bottom: 30px;
            right: 20px;
            margin-bottom: -80px;
        }

            .footer img {
                vertical-align: middle;
                padding-right: 10px;
                height: 30px;
            }

        #materials {
            width: 1400px;
            justify-content: left;
            padding-left: 10px;
        }

        .wrap {
            min-height: 100%;
        }

        #top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            z-index: 1;
            background: linear-gradient(to bottom,#f8f8f8 0,#ccc 100%);
            height: 45px;
            top: 0;
            border-bottom: #aaa solid 2px;
            margin-bottom: 5px;
            box-shadow: 2px 2px 4px 2px #bbb, -5px 5px 5px 5px #fff;
        }

        #home {
            background: url(/images/home.png) left no-repeat;
            padding:0 50px;
            
        }

        #materials ul {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

            #materials ul li {
                margin: 10px 0 0 -10px;
                display: inline-block;
                background: none;
                padding-left: 10px;
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;
            }

                #materials ul li:hover {
                    background: linear-gradient(to bottom, #f8f8f8 0,#fefce6 100%) !important;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    cursor: pointer;
                    color: #333;
                }

                #materials ul li a {
                    width: 100%;
                    display: block;
                    color: #666;
                    text-decoration: none;
                }

                    #materials ul li a:hover {
                        text-decoration: underline blue dashed;
                        color: #111;
                        padding-left: 5px;
                    }

        #web {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 300px;
            padding: 0 50px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div id="top">
            <div id="web">
                <a href="https://www.xmath.cn" target="_blank">xmath<sup>&reg;</sup>先锋数学</a>
                <div id="category">栏目列表</div>
            </div>
            <div id="home"><a href="/index.aspx"> 回到首页</a></div>
        </div>
        <div id="imgContent">
            <div id="playBox" class="play-box">
                <div id="imgList">
                    <a href="#" class="current">
                        <span>a</span>
                        <img src="/images/test/1.jpg">
                    </a>
                    <a href="#">
                        <span>b</span>
                        <img src="/images/test/2.jpg">
                    </a>
                    <a href="#">
                        <span>c</span>
                        <img src="/images/test/3.jpg">
                    </a>
                    <a href="#">
                        <span>d</span>
                        <img src="/images/test/4.jpg">
                    </a>
                    <a href="#">
                        <span>e</span>
                        <img src="/images/test/5.jpg">
                    </a>
                    <a href="#">
                        <span>f</span>
                        <img src="/images/test/6.jpg">
                    </a>
                </div>
                <div id="iconList">
                    <ul>
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                    </ul>
                </div>
                <div class="slidebar slidebar_left"><</div>
                <div class="slidebar slidebar_right">></div>
            </div>
            <div id="title">
                <ul>
                    <li class="current">
                        <a href="" target="_blank">
                            <h2>1111111111111</h2>
                            <h3>1111111111</h3>
                        </a>
                    </li>
                    <li>
                        <a href="" target="_blank">
                            <h2>2222222222222</h2>
                            <h3>2222222222222222</h3>
                        </a>
                    </li>
                    <li>
                        <a href="" target="_blank">

                            <h2>333333333333333333</h2>
                            <h3>3333333333</h3>
                        </a>
                    </li>
                    <li>
                        <a href="" target="_blank">
                            <h2>4444444444444</h2>
                            <h3>4444444444</h3>
                        </a>

                    </li>
                    <li>
                        <a href="" target="_blank">
                            <h2>5555555555555</h2>
                            <h3>555555555555</h3>
                        </a>

                    </li>
                    <li>
                        <a href="" target="_blank">
                            <h2>66666666</h2>
                            <h3>66666</h3>
                        </a>

                    </li>
                </ul>
            </div>
        </div>

        <div id="materials">
            <ul>
                <li>
                    <a href="">
                        <h2>1</h2>
                        <h3>1</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>2</h2>
                        <h3>2</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>3</h2>
                        <h3>3</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>4</h2>
                        <h3>4</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>5</h2>
                        <h3>5</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>6</h2>
                        <h3>6</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>7</h2>
                        <h3>7</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>8</h2>
                        <h3>8</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>9</h2>
                        <h3>9</h3>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h2>10</h2>
                        <h3>10</h3>
                    </a>
                </li>
            </ul>
        </div>

        <input id="pageIndex" type="hidden" value="1" />

    </div>
    <footer class="footer"><a href="https://www.staredu.cn/" target="_blank"><img src="/images/file_logo.png" title="星光教育信息科技"></a><a href="https://www.math.xyz" target="_blank"><img src="/images/file_logo_xmath.png"></a> <a href="https://www.xmath.cn" target="_blank">www.xmath<sup>&reg;</sup>.cn </a>先锋数学 </footer>

    <script src="/js/jquery.2.1.4.min.js"></script>
    <script src="/js/layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#pageIndex").val(1);
            var speed = 5000;
            var m = 1;
            var imgCount = $("#iconList ul li").length;
            var playTimer = setInterval(runPlay, speed);

            function runPlay() {
                if (m > imgCount - 1) m = 0;
                controlPlay(m);
                m++;
            }

            function controlPlay(n) {
                $("#imgList a").removeClass("current").eq(n).addClass("current");
                $("#iconList li").removeClass("current").eq(n).addClass("current");
                $("#title li").removeClass("current").eq(n).addClass("current");

            }

            $("#playBox").mouseenter(function () {
                clearInterval(playTimer);
                $(".slidebar").fadeIn(300);
            }).mouseleave(function () {
                playTimer = setInterval(runPlay, speed);
                $(".slidebar").fadeOut(300);
            });

            $("#iconList li").click(
                function () {
                    m = $(this).index();
                    controlPlay(m);
                    m++;
                }).hover(function () {
                    return false;
                });

            $(".slidebar").hover(function () { return false; });

            $(".slidebar_right").click(
                function () {
                    if (m > imgCount - 1) m = 0;
                    controlPlay(m);
                    m++;
                });
            $(".slidebar_left").click(
                function () {
                    m -= 2;
                    if (m < 0) m = imgCount - 1;
                    controlPlay(m);
                    m++;
                });
        });

        var timer;
        $(window).bind(‘scroll‘,
            function () {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 5) {
                        // alert("已经到底部了");
                        var ll = layer.load(2);
                        var pageIndex = parseInt($("#pageIndex").val());
                        for (var i = 0; i < 10; i++) {
                            var title = pageIndex * 10 + i + 1;
                            setTimeout(function (t) { $("#materials").find("ul").append(‘ <li><a href=""><h2>‘ + t + ‘</h2><h3>‘ + t + ‘</h3></a></li>‘); }, 500 * (i + 1), title);
                        }
                        $("#pageIndex").val(pageIndex + 1);
                        layer.close(ll);
                    }
                },
                    300);
            });
    </script>
</body>
</html>
以上是关于轮播图+懒加载+顶定固定菜单的主要内容，如果未能解决你的问题，请参考以下文章
[swiper4.0]自动轮播+循环轮播
懒加载图片轮播，总结完美可用
图片预加载和懒加载
ViewPager详解填充Fragment和懒加载
Android侧滑菜单和轮播图之滑动冲突