zoukankan      html  css  js  c++  java
  • 两排滚动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;
    }

  • 相关阅读:
    目标检测 anchor 理解笔记
    目标检测 IOU(交并比) 理解笔记
    目标检测 非极大值抑制(Non-Maximum Suppression,NMS)
    c# 获取当前时间的微秒
    [macOS开发.NET Core] 一个简单的WEB程序
    海康相机SDK二次开发只有视频无声音问题
    [macOS开发.NET Core] 开篇 & 抉择 & 先利其器
    Linux学习--4.用户和组的管理
    Linux学习--3.命令及查看命令帮助
    Linux学习--2.文件管理的基本命令
  • 原文地址:https://www.cnblogs.com/zhouyx/p/5454842.html
Copyright © 2011-2022 走看看