简单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> <!--向下滚动代码开始-->& ...
随机推荐
- 携程Apollo(阿波罗)配置中心使用Google代码风格文件(在Eclipse使用Google代码风格)(配合阿里巴巴代码规约快速设置)
Apollo默认使用了Google的代码风格,文件放在这里: https://github.com/ctripcorp/apollo/tree/master/apollo-buildtools/sty ...
- iOS 设备推断 最新统计代码
- (NSString*) deviceName { struct utsname systemInfo; uname(&systemInfo); ...
- Eclipse插件开发中的选择监听机制(Selection Provider-Listener)
Eclipse插件开发中的选择监听机制(Selection Provider-Listener) 监听机制是eclipse插件开发或rcp应用开发中经常使用的技术,比方点击TableViewer或Tr ...
- linux 打包 压缩
序 1.gzip 2.bzip2 3.tar 序 压缩优点 1.节省空间 2.节省带宽 解决脉络 如今有各种压缩文件形式,原因何在?主要是压缩技术更新换代,压缩方法不全然同样.不同的后缀 ...
- JSON-JSON字符串转换成JSON对象、JSON对象数组、java实体类以及保存到List列表中
处理JSON字符串时,一直出错,写个样例后发现原来是没有弄清楚数据的格式问题. 实现的是 JSONString 转换成java对象 或是 list列表 实例类 News package lyx.ent ...
- tesnorflow Conv2DTranspose
tensorflow/python/layers/convolutional.py # Infer the dynamic output shape: out_height = utils.decon ...
- web 开发之js---巧用iframe实现jsp无刷新上传文件
首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...
- 南阳oj 语言入门 A+B paoblem 题目477 题目844
A+Bproblem 题目844 两个数字翻转后相加 比方10+12 翻转后01+21=22 #include<stdio.h> int main() { int ji(in ...
- [计算机]如何在win7下查看并更改文件的默认后缀名
如何在win7下查看默认文件的后缀名并更改呢? 例如有一个文件本来是exe,想变更为txt.但是无法看到后缀名,就无法更改. 双击桌面上的计算机图标,或者任意盘符界面,单击如下图左侧“组织”右侧的下拉 ...
- doGet() throws NamingException报错
做一个通过JNDI查找资源的小练习,Context = new InitialContext(),发现NamingException异常,eclipse编辑器只有catch的提示,没有throws的提 ...