• 简单js图片点击向左滚动



    <style> .b_left
    {width:50px;height:75px;float:left;background:url(img/left_right.png) no-repeat;background-position:0px 0px;margin-top:170px;margin-right:25px;} .b_right{width:50px;height:75px;float:right;background:url(img/left_right.png) no-repeat;background-position:-50px 0px;margin-top:170px;} .b_content{ float:left; width:1000px; overflow:hidden; height:425px;} .b_content li{ float:left;overflow:hidden; width:311px; height:425px; padding:0px 12px;} .b_content li img{width:311px;} </style>
    <div class="box_con20">
            <div class="b_left" id="b_left"></div>
            <div class="b_content" id="b_content">
                <ul>
                    <li>
                        <img src="img/rongyu1.png" alt="" />
                    </li>
                    <li>
                        <img src="img/rongyu2.png" alt="" />
                    </li>
                    <li>
                        <img src="img/rongyu3.png" alt="" />
                    </li>
                </ul>
            </div>
            <div class="b_right" id="b_right"></div>
        </div><!--box_con20-->
        <SCRIPT type="text/javascript">
            var scrollPic = new ScrollPic();
            scrollPic.scrollContId   = "b_content"; //内容容器ID
            scrollPic.arrLeftId      = "b_left";//左箭头ID
            scrollPic.arrRightId     = "b_right"; //右箭头ID
            scrollPic.frameWidth     = 1000;//显示框宽度
            scrollPic.pageWidth      = 1000; //翻页宽度227
            scrollPic.speed          = 5; //移动速度(单位毫秒,越小越快)
            scrollPic.space          = 10; //每次移动像素(单位px,越大越快)
            scrollPic.autoPlay       = true; //自动播放
            scrollPic.autoPlayTime   = 10; //自动播放间隔时间(秒)
            scrollPic.initialize(); //初始化
         </SCRIPT>
    scrollPic.js

     要加载scrollPic.js这个js文件

  • 相关阅读:
    k8s--容器挂载 error: /proc must be mounted
    mysql--read only
    C#读取Excel文件(.xls .xlsx)
    如何使用BBCode
    markdown使用经验积累
    openlayers学习之-----入门篇
    echarts学习之----动态排序柱状图
    echarts学习之----多图例折线图
    Web3D学习之-----全景图预览插件photo-sphere-viewer
    vue报错解决----npm ERR!
  • 原文地址:https://www.cnblogs.com/baixuemin/p/4961449.html
Copyright © 2020-2023  润新知