• 两排滚动js


    html:

        <div class="mr_frbox">
            <div class="showtitle">
                <span>产品展示</span>
                <span class="show-right">News</span>
            </div>
            <div class="og_prev prev"></div>
            <div class="mr_frUl">
                <ul class="showlist">
                    <li>
                        <a href="#">
                            <img src="images/hb_14.jpg" width="220" height="167" />
                            <p>尾气吸收塔</p>
                        </a>
                        <a href="#">
                            <img src="images/hb_14.jpg" width="220" height="167" />
                            <p>尾气吸收塔</p>
                        </a>
                    </li>
                    
                </ul>
            </div>
            <div class="og_next next"></div>
        </div>

    js

    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>

    css

    /* scroll */
    /* .scroll{position:relative;}
    .picbox{background:#fff;position:relative;}
    .goodlist p{text-align:center;} */
    /* scroll */
    .scroll{1100px;margin:0 auto;position:relative;overflow:hidden;}
    .picbox{height:600px;background:#fff;overflow:hidden;position:relative;margin:15px;}
    .picbox ul{height:285px;padding-top:5px;}
    .piclist{position:absolute;left:0px;top:0px;}
    .swaplist{position:absolute;left:-3000px;top:0px;}
    .swaplist{
        clear:both;
        display:block;
        margin-top:40px;
    }
    .swaplist li{
        
        height:169px;
        border:1px solid #ccc;
        float:left;
        margin-right:32px;
        margin-left:18px;
        margin-bottom:50px;
    }
    /* btn */
    .mr_frUl{
    /*     margin-left:12px; */
    }
    .mr_frbox{
        position:relative;
    }
    .showtitle{
        margin-bottom:50px;
    }
    .showlist a img{
         border:1px solid #ccc;
        222px;
        height:169px;
    }
    .showlist p{
        height:32px;
        line-height:32px;
        margin-bottom:30px;
        text-align:center;
    }
    .prev{
        background:url('../images/bt_03.jpg') center no-repeat;
        18px;
        height:41px;
        cursor: pointer;
        position:absolute;
        left:0px;
        top:278px;
        z-index:9999;
    }
    .next{
        background:url('../images/bt_05.jpg') center no-repeat;
        18px;
        height:41px;
        cursor: pointer;
        position:absolute;
        right:0px;
        top:278px;
        z-index:9999;
    }
    .tempWrap{
        1100px !important;
    }

  • 相关阅读:
    随机二分图
    城市旅行
    JZPKIL
    线性基专题总结
    杜教筛专题总结
    [NOI2018]你的名字
    P1120 小木棍 [数据加强版]
    先序遍历
    P1736 创意吃鱼法
    P2258 子矩阵
  • 原文地址:https://www.cnblogs.com/zhouyx/p/5454842.html
Copyright © 2020-2023  润新知