简单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文件

原文地址:https://www.cnblogs.com/baixuemin/p/4961449.html