zoukankan      html  css  js  c++  java
  • 简单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文件

  • 相关阅读:
    Django之搭建学员管理系统
    数据库查询操作(fetchone,fetchall)
    HTTP 方法:GET与 POST
    初识django框架
    Memcached的批量删除方案总结
    centos5.5 下面 lnmp环境遇到的小问题
    CentOS 5.5 --学习(1)
    HTTP请求方法及响应码详解(http get post head)
    codeigniter注意点
    htaccess 伪静态的规则
  • 原文地址:https://www.cnblogs.com/baixuemin/p/4961449.html
Copyright © 2011-2022 走看看