ScrollPic.js—简单易用的图片左右滚动插件

向右看齐 2021-10-18 21:46 305阅读 0赞

一、ScrollPic.js是一个很好理解运用的图片左右滚动插件，兼容性较好，可以放心大胆的使用：  
效果图如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片左右滚动</title>
        <style type="text/css">
            .picCenter {
                width: 888px;
                margin: 15px auto;
            }
    
            .xinxiIcon {
                margin:0 0 -20px auto;
            }
    
            .xinxiIcon img {
                width: 100%;
                height: auto;
                object-fit: cover;
            }
    
            .photo_nr {
                display: flex;
                align-items: center;
                width: 888px;
                margin: 15px auto;
            }
    
            .informationText {
                border-bottom: 1px solid #ccc;
                width: 888px;
                margin: 15px auto;
                text-align: center;
            }
    
            .informationText span {
    
                background: #ffffff;
                color: #1C1F86;
            }
    
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
    
            .photo_nr ul li {
                float: left;
                margin: 0 35px;
                line-height: 30px;
                text-align: center;
            }
    
            .photo_nr p {
                padding: 0;
                margin: 0;
            }
    
    
            #LeftArr {
                background: url(img/e_left.png) no-repeat;
                width: 40px;
                height: 40px;
                margin-left: -15px;
                text-decoration: none;
                color: #323232;
            }
    
            #RightArr {
                background: url(img/e_right.png) no-repeat;
                width: 40px;
                height: 40px;
                margin-right: -15px;
                text-decoration: none;
                color: #323232;
            }
            .listRotation{
                border: 2px solid #023246;
                border-top: none;
            }
        </style>
    
    </head>
    <body>
    <div class="picCenter">
        <div class="xinxiIcon">
            <img src="img/xinxi.png">
        </div>
    
        <div class="listRotation">
            <div class="informationText">
                <span>工商信息</span>
            </div>
            <div class="photo_nr">
                <a href="javascript:;" id="LeftArr"> ← </a>
                <ul id="picList1" style="width: 888px;overflow: hidden;">
                    <li>
                        <div class="photo_img"><img src="img/zhengshu.png" alt=""/></div>
                        <p>工商证书</p>
                    </li>
                    <li>
                        <div class="photo_img"><img src="img/zhengshu.png" alt=""/></div>
                        <p>工商证书</p>
                    </li>
                    <li>
                        <div class="photo_img"><img src="img/zhengshu.png" alt=""/></div>
                        <p>工商证书</p>
                    </li>
                    <li>
                        <div class="photo_img"><img src="img/zhengshu.png" alt=""/></div>
                        <p>工商证书</p>
                    </li>
                    <li>
                        <div class="photo_img"><img src="img/zhengshu.png" alt=""/></div>
                        <p>工商证书</p>
                    </li>
                    <div style="clear: both;"></div>
                </ul>
                <a href="javascript:;" id="RightArr">  → </a>
            </div>
    
        </div>
    </div>
    
    
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ScrollPic.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            var cc1 = new ScrollPic();
            cc1.scrollContId = "picList1"; // 内容容器ID,picList1加到容器上，
            cc1.arrLeftId = "LeftArr";//左箭头ID
            cc1.arrRightId = "RightArr"; //右箭头ID
            cc1.frameWidth = 1200; //显示框的宽度
            cc1.pageWidth = 1; //翻页宽度
            cc1.speed = 10; //移动速度(单位毫秒，越小越快)
            cc1.space = 10; //每次移动像素(单位px，越大越快)
            cc1.autoPlay = true; //自动播放
            cc1.autoPlayTime = 0.03; //自动播放间隔时间(秒)
            cc1.initialize(); //初始化
        });
    </script> 
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: /images/20211018/1638cf934c804f8b9df353c9f482dd3a.png