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

简单js图片点击向左滚动的更多相关文章

  1. js图片懒加载(滚动加载)是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  2. js图片懒加载(滚动加载)判断是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  3. js 图片点击放大功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS图片延迟加载分析及简单的demo

    JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...

  5. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  6. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  7. js实现图片向上播放(轮番滚动)

    js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...

  8. APP中常见上下循环滚动通知的简单实现,点击可进入详情

    APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...

  9. 常用JS图片滚动(无缝、平滑、上下左右滚动)

    常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...

随机推荐

  1. P1028 数的计算 洛谷

    https://www.luogu.org/problem/show?pid=1028 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先输入一个自然数n(n<=1000), ...

  2. cogs——2419. [HZOI 2016]公路修建2

    2419. [HZOI 2016]公路修建2 ★☆   输入文件:hzoi_road2.in   输出文件:hzoi_road2.out   简单对比时间限制:1 s   内存限制:128 MB [题 ...

  3. rsyslogd系统日志服务总结

    简单介绍 syslog系统日志服务协议,标准出来的比较晚 用于记录系统日志或者用户程序产生的日志 采用C/S架构,本地可以通过socket和syslogd守护进程通讯,远程通过TCP/UDP协议通信, ...

  4. golang time.Duration()的问题解疑

    原文:  How to multiply duration by integer? 看到golang项目中的一段代码, ---------------------------------------- ...

  5. 012 router password

    Press RETURN to get started!       Router>en Router#config t Enter configuration commands, one pe ...

  6. FaceBook开源库Fresco

    讨论学习使用 关于 Fresco Fresco 是一个强大的图片载入组件. Fresco 中设计有一个叫做 image pipeline 的模块.它负责从网络.从本地文件系统.本地资源载入图片. 为了 ...

  7. 本地调用jni之VC++无法导入问题

    事实上非常easy,无法导入头文件就自己新建呗 1. 首先编写java代码 class Vrv { public native void printVersion(); static { System ...

  8. 关于函数return的一些理解与小实例

    先看代码: function example (){ var index=1; return {//像这种加个大括号的就是返回一个对象了,而不仅仅是一个值 index, net:function(){ ...

  9. Mysql-SQL优化-统计某种类型的个数

    有时我们想统计某种类型有多少个,会用这个SQL. 全表扫描之余,还要filesort.耗时1.34秒. mysql> select country,count(*) from t1 group ...

  10. SP2-0734: 未知的命令开头 &quot;imp scott/...&quot; - 忽略了剩余的行。

    Oracle数据导入报错:SP2-0734: 未知的命令开头 "imp scott/..." - 忽略了剩余的行. 原因:进入sqlplus里是不能运行imp的(sqlplus不认 ...