简单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> <!--向下滚动代码开始-->& ...
随机推荐
- JavaScript为字符串添加样式
<script type="text/javascript"> var txt="Hello World!" document.write(&quo ...
- dubbo的jmeter压测时jar包的热加载/动态加载
在做dubbo的jmeter压测时,需要把jar包放入jmeter的lib/ext目录下,但是jmeter启动的时候会自动加载这个目录lib目录及lib/ext目录,这样启动后放入这些目录下的jar包 ...
- Justinmind使用教程(2)——计算表达式及条件用法
Justinmind的计算表达式以及条件condition的使用对于刚開始学习的人而言比較麻烦. 结合网上了一个教程本文主要针对计算器演示样例进行计算表达式以及条件的使用. 实现目标:依据单位价格(静 ...
- Session与Cookie解析
Session和Cookie这两个对象也接触了比較长的时间了,今天就来总结一下. 首先,他们都是会话跟踪中经常使用的技术.Cookie在client记录信息来确定用户身份,Session在服务端记录信 ...
- linux c 获取当前执行进程总数
获取当前执行进程总数的命令为: ps auxw | wc -l 获取当前执行进程总数的源代码例如以下: #include <stdio.h> #include <stdlib.h&g ...
- 前端开发本地环境配置(Apache+Dreamweaver)
一.安装apache服务器 1.下载apache软件: 2.安装,直接下一步就好: 3.安装好后找到安装文件夹下的conf文件中的httpd.conf: 4.打开httpd.conf文件,做以下修改: ...
- web 开发之js---js 中的定时器setTimeout(function,time),setinterval(function,time)
####10秒自动跳转 <div class="jf_register"> <h2>您好,欢迎光临<fmt:message key="b2c ...
- 鸟哥的Linux私房菜-----9、vi文本处理器
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 如何理解scrapy Selector
1 scrapy Selector是什么 Selector对象本质上是对DOM tree的子树的抽象,这种抽象的目的是用于定位我们感兴趣的node.比如某次http response是一棵完整的DOM ...