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

最新推荐文章于 2021-03-12 19:40:27 发布

树洞菇凉

最新推荐文章于 2021-03-12 19:40:27 发布

阅读量583

点赞数 1

分类专栏： js插件文章标签： js插件

本文链接：https://blog.csdn.net/qq_37916164/article/details/99412543

版权

js插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<!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>

树洞菇凉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ScrollPic.js—简单易用的图片左右滚动插件

一、ScrollPic.js是一个很好理解运用的图片左右滚动插件，兼容性较好，可以放心大胆的使用：效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片左右滚动</title> <style ...
复制链接

扫一扫