<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. POJ3295 Tautology 解题报告

    直接上分析: 首先 弄清各种大写字母的操作的实质 K 明显 是 and   & A 是 or      | N 是 not   ! C  由表格注意到 当 w<=x 时 值为1 E  当 ...

  2. 洛谷 P1457 城堡 The Castle

    P1457 城堡 The Castle 题目描述 我们憨厚的USACO主人公农夫约翰(Farmer John)以无法想象的运气,在他生日那天收到了一份特别的礼物:一张“幸运爱尔兰”(一种彩票).结果这 ...

  3. MongoDB小结18 - find【查询条件$not】

    not 是元条件句,可以用于任何条件之上,意为取反

  4. Nginx+Tomcat+Memcached负载均衡和session共享

    1. 演示搭建 说明:本文参考网络日志http://blog.csdn.net/remote_roamer/article/details/51133790,结合实际操作,仅做个演示记录. 1.1.  ...

  5. 如何使用python书写守护进程?daemon、python-daemon

    可以参考的supervisor实现:https://github.com/Supervisor/supervisor:http://supervisord.org/configuration.html ...

  6. laravel email markdown

    laravel 邮件使用markdown php artisan make:mail lessonPublished --markdown="emails.published" 这 ...

  7. Oracle index unusable和invisible的差别

    摘录自11g的官方文档:      UNUSABLE Specify UNUSABLE to mark the index or index partition(s) or index subpart ...

  8. Linux下,PHP的SESSION不起作用的问题

    改动SESSION目录的权限就能够了. 先找到SESSION目录, 然后 chmod -R 777 /var/lib/php/session 假设没有此目录,则新建此目录 mkdir -R 777 / ...

  9. LVS 负载均衡 (VS/DR模式 与 VS/TUN 模式)

    一.VS/DR模式 ①.客户端将请求发往前端的负载均衡器,请求报文源地址是CIP,目标地址为VIP. ②.负载均衡器收到报文后,发现请求的是在规则里面存在的地址,那么它将目标MAC改为了RIP的MAC ...

  10. Unity 5.x 导入教学Demo

    前言 小巫也来玩Unity3D了.以后会把学习的一些过程博客记录下来,方大家也方便自己学习和查看.本篇博客介绍怎样在Unityclient中导入Assert Store中下载的项目资源,方便我们进一步 ...