JQ实现滑块效果

最新推荐文章于 2024-03-15 09:34:23 发布
飞不起来的飞机耶耶耶
最新推荐文章于 2024-03-15 09:34:23 发布
阅读量199
点赞数 1
文章标签： css 前端 css3 html html5 javascript jquery
本文链接：https://blog.csdn.net/m0_75016516/article/details/133015292
版权
效果图
源码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../code/JS/jq.js"></script>
    <style>
        /* **随手购** */
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }


        .w_bd_sosou {
            width: 1200px;
            height: 404px;
            margin-top: 40px;
        }

        .w_bd_sosou_top {
            width: 100%;
            height: 42px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .w_bd_sosou_top_left {
            width: 63px;
            height: 42px;
            color: #555555;
            font-size: 21px;
            text-align: center;
            line-height: 42px;
        }

        .w_bd_sosou_top ul {
            width: 51px;
            height: 8px;
            display: flex;
        }

        .w_bd_sosou_top ul .sosou {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
            background-color: #9f9f9f;
        }

        .w_bd_sosou_top ul .sosou_active {
            margin-right: 5px;
            width: 20px;
            height: 8px;
            background-color: #fc5f8d;
        }

        .w_bd_sosou_bottom {
            width: 100%;
            height: 350px;
            margin-top: 58px;
        }

        /*头部开始*/
        .bodyCon08 {
            width: 1200px;
            height: 350px;
            box-sizing: border-box;
        }

        .bodyCon08 .students {
            /* margin: 0 auto; */
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
        }

        .bodyCon08 .students p.PP {
            width: 510px;
            height: 50px;
            font-size: 16px;
            color: #333;
            text-align: center;
            position: absolute;
            top: 60px;
            left: 300px;
            box-sizing: border-box;
        }

        #four_flash {
            position: relative;
            width: 1200px;
            height: 350px;
            margin: 0 auto;
            position: absolute;
            bottom: 40px;
            box-sizing: border-box;
        }

        #four_flash .flashBg {
            width: 1200px;
            height: 350px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        #four_flash .flashBg ul.mobile {
            width: 300%;
            height: 350px;
            position: absolute;
            top: 15;
            left: 0;
            box-sizing: border-box;
        }

        #four_flash .flashBg ul.mobile li {
            border: 1px dashed #dadce3;
            float: left;
            width: 200px;
            height: 338px;
            padding: 25px 20px 27px;
            box-sizing: border-box;
            /* margin-left: 26px; */
            /* padding-top: 40px; */
            /* color: #6C6E85; */
        }

        #four_flash .flashBg ul.mobile li img {
            width: 158px;
            height: 158px;
            display: block;
            margin: 0 auto;
            box-sizing: border-box;
            /* border: 10px solid #dadce3; */
            /* border-radius: 82px; */
        }

        #four_flash .flashBg ul.mobile li dd {
            font-size: 16px;
            width: 100%;
            line-height: 24px;
            color: #f42424;
            height: 24px;
            text-align: center;
            box-sizing: border-box;
            margin: 0;
        }

        #four_flash .flashBg ul.mobile li p {
            font-size: 12px;
            color: #555555;
            text-align: center;
            height: 50px;
            width: 100%;
            /* line-height: 24px; */
            margin-bottom: 10px;
            box-sizing: border-box;
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        #four_flash .flashBg ul.mobile li a {
            display: block;
            width: 138px;
            height: 30px;
            border: 1px solid #fc5f8d;
            margin: 0px auto;
            color: #fc5f8d;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;
            font-size: 14px;
        }

        #four_flash .flashBg ul.mobile li a:hover {
            background-color: #fc5f8d;
            color: #fff;
        }

        #four_flash .but_left {
            width: 30px;
            height: 70px;
            position: absolute;
            top: 136px;
            left: 0px;
            background-color: #0000004d;
            font-size: 24px;
            text-align: center;
            line-height: 70px;
            box-sizing: border-box;
            display: none;
        }

        #four_flash .but_right {
            display: none;
            width: 30px;
            height: 70px;
            position: absolute;
            top: 136px;
            right: 0px;
            background-color: #0000004d;
            font-size: 24px;
            text-align: center;
            line-height: 70px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="w_bd_sosou">
        <div class="w_bd_sosou_top">
            <div class="w_bd_sosou_top_left">随手购</div>
            <ul>
                <li class="sosou sosou_active"></li>
                <li class="sosou"></li>
                <li class="sosou"></li>
            </ul>
        </div>
        <div class="w_bd_sosou_bottom">
            <div class="bodyCon08"><!--列表-->
                <div class="students">
                    <div id="four_flash">
                        <div class="flashBg">
                            <ul class="mobile">
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                                <li>
                                    <img
                                        src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490218701469.jpg" />
                                    <dd>￥78.00</dd>
                                    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</p>
                                    <a href="">查看详情</a>
                                </li>
                            </ul>
                        </div>
                        <div class="but_right"> > </div>
                        <div class="but_left">
                            < </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <script>
        // *随手购*

        //学员
        $(".w_bd_sosou").mouseenter(function () {
            $(".but_right").show()
            $(".but_left").show()
        })
        $(".w_bd_sosou").mouseleave(function () {
            $(".but_right").hide()
            $(".but_left").hide()
        })
        var _index5 = 0;
        $(".sosou").mouseenter(function () {
            $(this).addClass("sosou_active").siblings().removeClass("sosou_active");
            // $(".sosou_bd ul").eq($(this).index()).addClass("sosou_kuai").siblings().removeClass("sosou_kuai");
        })
        $(".sosou").eq(0).mouseenter(function () {
            $("#four_flash .flashBg ul.mobile").stop().animate({ left: 0 }, 500);
            _index5 = 0;
        })
        $(".sosou").eq(1).mouseenter(function () {
            $("#four_flash .flashBg ul.mobile").stop().animate({ left: -1200 }, 500);
            _index5 = 1;
        })
        $(".sosou").eq(2).mouseenter(function () {
            $("#four_flash .flashBg ul.mobile").stop().animate({ left: -2400 }, 500);
            _index5 = 2;
        })
        $("#four_flash .but_right").click(function () {
            _index5++;
            console.log(_index5);
            if (_index5 == 0) {
                $(".sosou").eq(0).addClass("sosou_active").siblings().removeClass("sosou_active");
            }
            if (_index5 == 1) {
                $(".sosou").eq(1).addClass("sosou_active").siblings().removeClass("sosou_active");
            }
            if (_index5 == 2) {
                $(".sosou").eq(2).addClass("sosou_active").siblings().removeClass("sosou_active");
            }

            // var len = $(".flashBg ul.mobile li").length;
            if (_index5 > 2) {
                $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
                $("#four_flash .flashBg ul.mobile").stop().animate({ left: -2400 }, 500);
                _index5 = 2;
                console.log(_index5);
            } else {
                $("#four_flash .flashBg ul.mobile").stop().animate({ left: -_index5 * 1200 }, 500)
            }
            // $("#four_flash .flashBg ul.mobile").stop().animate({ left: -_index5 * 1200 }, 1000);
        });


        $("#four_flash .but_left").click(function () {
            _index5--;
            if (_index5 == 0) {
                $(".sosou").eq(0).addClass("sosou_active").siblings().removeClass("sosou_active");
            }
            if (_index5 == 1) {
                $(".sosou").eq(1).addClass("sosou_active").siblings().removeClass("sosou_active");
            }
            if (_index5 == 2) {
                $(".sosou").eq(2).addClass("sosou_active").siblings().removeClass("sosou_active");
            }
            if (_index5 < 0) {
                $("ul.mobile").prepend($("ul.mobile").html());
                $("ul.mobile").css("left", "0px");
                _index5 = 0
            } else {
                $("#four_flash .flashBg ul.mobile").stop().animate({ left: -_index5 * 1200 }, 500);
            }

        });
    </script>
</body>

</html>