jq 京东秒杀

最新推荐文章于 2022-01-24 15:31:49 发布

平凡之的世界

最新推荐文章于 2022-01-24 15:31:49 发布

阅读量351

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/pinfangdeshijie/article/details/108227381

版权

    <!-- 样式 -->
       <style>
       * {
           margin: 0;
          padding: 0;
        }
      ul,ol {
        list-style: none;
       }

        .wrap {
            width: 1200px;
            background-color: azure；
            margin: 100px auto 0;  }

       /* 秒表 */
       .miao {
        width: 200px;
        height: 260px;
        background: url("img/skill.png");
        float: left;
    }

      .miao h3 {
        text-align: center;
        margin-top: 30px;
        font-size: 20px;
        margin-bottom: 90px;
    }
     .miao p {
        text-align: center;
        margin-top: 30px;

    }
    .miao div {
        text-align: center;
        margin-top: 20px;
    }
 .miao div span {
        width: 50px;
        height: 50px;
        background: paleturquoise;

    }

    .miao div em {
        width: 10px;
        height: 10px;
        margin-left: 10px;
    }

         /* 轮播 */
       .lunbo {
          width: 800px;
          height: 260px;
          float: left;
          overflow: hidden;
          position: relative；
    }
.lunbo ul {
        width: 5000px;
        height: 260px;
     position: relative;
    }
 .lunbo ul li {
        width: 800px;
        height: 260px;
        float: left;
    }
    .lunbo ul li div {
        width: 197px;
        height: 260px;
        background-color: papayawhip;
             margin: 1px 1px;
        float: left;
    }
   .lunbo ul li div img {
        width: 140px;
        height: 140px;
        margin-top: 30px;
        margin-left: 30px;
    }

    .lunbo ul li div p {
        width: 140px;
        height: 30px;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 12px;
        overflow: hidden;
        /*文本超出部分  省略号*/
        text-overflow: ellipsis;
        /*强制不换行*/
        white-space: nowrap;
    }
    .lunbo ul li div .pp {
        width: 140px;
        height: 30px;
        text-align: center;
        margin-left: 25px;
        border: 1px solid red;

    }
    .lunbo ul li div .p1 {
        width: 70px;
        height: 30px;
        background: red;
        float: left;
        color: #fff;
    }
    .lunbo ul li div .p2 {
        width: 56px;
        height: 30px;
        background: #fff;
        float: left;
        text-decoration: line-through;
        text-align: center;
        opacity: 0.5;
    }

    .lunbo button {
        width: 30px;
        height: 50px;
        background: sienna;
        position: absolute;
        top: 50%;
        text-align: center;
        opacity: 0.5;

    }

    .lunbo #left {
        left: 0px;
        border-radius: 0 20px 20px 0;
    }
    .lunbo #right {
        right: 0px;
        border-radius: 20px 0 0 20px;
    }
    .box {
        width: 200px;
        height: 260px;
        float: left;
        overflow: hidden;
        position: relative;

    }
  .box ul {
        width: 400px;
        height: 260px;
        position: absolute;

    }
    .box ul li {
        width: 200px;
        height: 260px;
        float: left;
        background-color: palegreen;
    }
    .box ul li img {
        width: 140px;
        height: 140px;
        margin-top: 25px;
        margin-bottom: 30px;
        margin-left: 30px;
        margin-top: 30px;
    }
    .box ul li p {
        width: 80px;
        height: 20px;
        text-align: center;
        border-radius: 50px;
        border: 1px solid red;
        margin-left: 60px;
        font-size: 13px;
        font-weight: 900;
        color: red;
    }
    .box ol {
        width: 80px;
        height: 20px;
        position: absolute;
        bottom: 10px;
        left: 30%;
        margin-bottom: 0px;
  }
 .box ol li {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        float: left;
        margin-left: 20px;
        background-color: palevioletred;
    }
    .box ol .active {
        background-color: red;
    }
</style>

 <body>
    <div class="wrap">
    <div class="miao">
        <h3>京东秒杀</h3>
        <p><strong>14:00</strong>点场 倒计时</p>
        <div>
            <span id="hh">00 </span>
            <em>:</em>
            <span id="mm">00</span>
            <em>:</em>
            <span id="ss">00</span>
        </div>
    </div>
    <div class="lunbo">
        <ul>
            <li>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/img2.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img2.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img2.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img2.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/img3.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img3.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img3.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img3.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
                <div>
                    <img src="img/img1.webp" alt="">
                    <p>逆世界 intel八核十六线程/GTX1050Ti吃鸡独显32G内存游戏电竞台式电脑主机DIY组装机 套餐二：八核十六线程/GTX1050Ti吃鸡独显</p>
                    <div class="pp">
                        <span class="p1">￥:123</span>
                        <span class="p2">￥:456</span>
                    </div>
                </div>
            </li>
        </ul>
        <button id="right">右</button>
        <button id="left">左</button>
    </div>  
    
  <!-- 小轮播 -->
    <div class="box">
        <ul>
            <li>
                <img src="img/a.webp" alt="">

                <p>品类秒杀</p>
            </li>
            <li>
                <img src="img/b.webp" alt="">

                <p>品类秒杀</p>
            </li>
        </ul>
        <ol>
            <li class="active"></li>
            <li></li>
        </ol>
    </div>
</div>

      <script>
      $(function () {
      // 倒计时部分
      setInterval(function () {
        var dt1 = new Date();
        var dt2 = new Date('2020-9-08 12:00:00');
        var dt = dt2 - dt1;

            //秒
        var s = parseInt(dt / 1000 % 60);
        //分
        var m = parseInt(dt / 1000 / 60 % 60);
        //时
        var h = parseInt(dt / 1000 / 60 / 60 % 24);

        s = s < 10 ? '0' + s : s;
        m = m < 10 ? '0' + m : m;
        h = h < 10 ? '0' + h : h;
        $('#hh').text(h);
        $('#mm').text(m);
        $('#ss').text(s);
    }, 1000);

    //左右轮
    var index1 = 0;
    $('#right').click(function () {
        index1 = index1 >= 3 ? 0 : index1 + 1;
        $('.lunbo ul').stop().animate({
            left: -800 * index1,
        }, 500);
    });
    $('#left').click(function () {
        index1 = index1 <= 0 ? 3 : index1 - 1;
        $('.lunbo ul').stop().animate({
            left: -800 * index1,
        }, 500);
    });


    //右侧轮播
    var index2 = 0;
    $('.box ol li').mouseenter(function () {
        index2 = $(this).index();
        $('.box ul').stop().animate({
            left: -200 * index2
        }, 600);
        $(this).addClass('active').siblings().removeClass('active');
    })
 });


</script>

平凡之的世界

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq 京东秒杀

 <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } .wrap { width: 1200px; background-color: azure； margin...
复制链接

扫一扫