SuperSlide实现商品列表滚动效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：SuperSlide实现商品列表滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>



    <meta charset="UTF-8">
    <title>新品展示</title>
<style>
    *{margin: 0;padding: 0;font-family: "微软雅黑";font-weight: normal;list-style:none;font-style:normal;text-decoration:none}
.container{width: 1200px;margin: 0 auto;}
/*新品展示*/
.pro-new{width: 100%;height: 100vh;overflow: hidden;padding: 35px 0 45px 0;background: #f3f1ff;}
.pro-new .title{font-size: 34px;text-align: center;padding-bottom: 5px;color: #333333;letter-spacing: 1px;}
.pro-new .sub-title{font-size: 20px;text-align: center;color: #333333;}
.pro-new .sub-title span{display: inline-block;height: 30px;line-height: 30px;width: auto;}
.pro-new .sub-title span.text{padding: 0 10px;}
.pro-new-show {position: relative;width: 100%;height: auto;overflow: hidden;}
.pro-new-show .pro-list{width: 100%;height: auto;margin-top: 30px;overflow: hidden;}
.pro-new-show .pro-list ul li{float: left;width: 387px;height: auto;overflow: hidden;background: #FFFFFF;margin-right: 19px;}
.pro-new-show .pro-list ul li:last-child{margin-right: 0;}
.pro-new-show .pro-list ul li img{width: 100%;height: 291px;}
.pro-new-show .pro-list ul li .desc{padding: 10px 20px;box-sizing: border-box;}
.pro-new-show .pro-list ul li .desc .p-title{font-size: 16px;color: #323232;padding-bottom: 5px;}
.pro-new-show .pro-list ul li .desc .p-desc{font-size: 14px;color: #969696;line-height: 25px;}
.pro-new-show .arrow a{display: inline-block;position: absolute;width: 49px;height: 100px;z-index: 2;}
.pro-new-show .arrow a.prev{left: 0;top: 50%;margin-top: -100px;background: url(//repo.bfw.wiki/bfwrepo/image/5f7ab7a3a8387.png) center center no-repeat;}
.pro-new-show .arrow a.next{right: 0;top: 50%;margin-top: -100px;background: url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png) center center no-repeat;}
.pro-new-show .arrow a:hover{background-color: rgba(0,0,0,.3);}
.pro-new-show .pagination{position: relative;width: 100%;height: auto;overflow: hidden;padding-top: 40px;text-align: center;}
.pro-new-show .pagination ul li{width: 15px;height: 15px;border-radius: 100%;background: #FFFFFF;display: inline-block;margin: 0 8px;text-indent:-9999px; }
.pro-new-show .pagination ul li.on{background: #2069ff;}

</style>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.SuperSlide.2.1.3.js"></script>
</head>

<body>
    <!--新品展示-->
    <div class="pro-new">
        <div class="container">
            <div class="title">
                新品展示
            </div>
            <div class="sub-title">
                <span>——</span>
                <span class="text">New Products</span>
                <span>——</span>
            </div>
            <div class="pro-new-show">
                <!--新品列表-->
                <div class="pro-list">
                    <div class="tempWrap" style="overflow:hidden; position:relative; width:1218px">
                        <ul style="width: 2436px; left: -1218px; position: relative; overflow: hidden; padding: 0px; margin: 0px;">
                            <li style="float: left; width: 387px;">
                                <a href="#">
                                    <div class="img">
                                        <img src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_387,h_291,/quality,q_90">
                                    </div>
                                    <div class="desc">
                                        <p class="p-title">
                                            产品名称
                                        </p>
                                        <p class="p-desc">
                                            这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...
                                        </p>
                                    </div>
                                </a>
                            </li>
                            <li style="float: left; width: 387px;">
                                <a href="#">
                                    <div class="img">
                                        <img src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_387,h_291,/quality,q_90">
                                    </div>
                                    <div class="desc">
                                        <p class="p-title">
                                            产品名称
                                        </p>
                                        <p class="p-desc">
                                            这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...
                                        </p>
                                    </div>
                                </a>
                            </li>
                            <li style="float: left; width: 387px;">
                                <a href="#">
                                    <div class="img">
                                        <img src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.p.........完整代码请登录后点击上方下载按钮下载查看