简单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这个js文件
简单js图片点击向左滚动的更多相关文章
- js图片懒加载(滚动加载)是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
- js图片懒加载(滚动加载)判断是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
- js 图片点击放大功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- js实现图片向上播放(轮番滚动)
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
- APP中常见上下循环滚动通知的简单实现,点击可进入详情
APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...
- 常用JS图片滚动(无缝、平滑、上下左右滚动)
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...
随机推荐
- Java电商项目-6.实现门户首页数据展示_Redis数据缓存
目录 项目的Github地址 需求介绍 搭建Redis集群环境 下面先描述单机版redis的安装 下面将进行Redis3主3从集群环境搭建 基于SOA架构, 创建门户ashop-portal-web门 ...
- 【SQL Server 学习系列】-- 收缩数据库文件大小
USE WebExam; GO ALTER DATABASE WebExam SET RECOVERY SIMPLE; GO -- 收缩文件到 1 MB. ); GO ALTER DATABASE W ...
- html中布局,让下一个子元素占据剩余的高度
---------------------------------------------------------------------- 原因是: height:100% 引起的, 这句话的意思是 ...
- AutoCAD如何打印
现在有一个CAD图纸,左侧为房型图,右侧为规划好之后的图纸,我只要打印右侧的东西.点击文件-打印 在打印设备中选择Default Windows System Printer,名称的下拉菜单下面有 ...
- 一个最简单的Servlet实例
先在tomcat的webapps目录下,新建一目录,如test.然后,在test目录下建立WEB-INF为名的目录.这个必须有. 然后,在WEB-INF目录下建立classes目录.用以存储所用到的c ...
- C++对象模型——指向Member Function的指针 (Pointer-to-Member Functions)(第四章)
4.4 指向Member Function的指针 (Pointer-to-Member Functions) 取一个nonstatic data member的地址,得到的结果是该member在 cl ...
- opencv基础笔记(1)
为了细致掌握程明明CVPR 2014 oral文章:BING: Binarized Normed Gradients for Objectness Estimation at 300fps的代码,的好 ...
- 如何调试Node.js
Debugging Node.js with Chrome DevTools https://nodejs.org/en/docs/guides/debugging-getting-started/ ...
- 学习 Shell —— 认识 shell
0. 认识 shell shell 是一个命令行解释器(interpreter),它会输出一个提示符,等待输入一个命令,然后执行该命令.如果该命令行的第一个单词不是一个内置的 shell 命令,那么 ...
- luogu 4429 染色
bjoi 2018 染色 推了个错误结论得了60分? 题目大意: 一个无重边和自环的无向图,并且对每个点分别给了一个大小为2的颜色集合,只能从这个集合中选一种颜色给这个点染色 求一个染色方案使得没有两 ...