客观的讲,scrollpic.js的确是一个很好用的图文滚动插件,它不但可以左右控制无缝连续滚动,还可以兼容如此多的浏览器,真的是难能可贵。对于没有太多JS专业功底的网页生产者,这个插件用起来也不是很难,所以当你需要时就不妨大胆的用吧。

插件的下载地址:ScrollPic.js

使用方法:

 
  1. // 先加载ScrollPic.js插件后再执行以下语句
  2. window.onload = function(){
  3. scrollPic_01 = new ScrollPic();
  4. scrollPic_01.scrollContId = "pic"; //图片容器ID
  5. scrollPic_01.arrLeftId = "left"; //左按钮ID
  6. scrollPic_01.arrRightId = "right"; //右按钮ID
  7. scrollPic_01.frameWidth = 840; //图片容器宽度
  8. scrollPic_01.pageWidth = 210; //每张图片宽度
  9. scrollPic_01.speed = 10; //移动速度(单位毫秒,越小越快)
  10. scrollPic_01.space = 10; //每次移动像素(单位px,越大越快)
  11. scrollPic_01.autoPlay = false; //自动播放
  12. scrollPic_01.autoPlayTime = 3; //自动播放间隔时间(秒)
  13. scrollPic_01.initialize(); //初始化
  14. }

DEMO的截图 :

demo演示地址

ScrollPic.js——图片左右滚动插件(单一功能)相关推荐

  1. ScrollPic.js——图片左右滚动插件

    自己在做项目的时候刚好遇到了图片做左右滚动的项目,发现ScrollPic.js这个插件还是很好用的,一般的浏览器都支持,也可以做成bootstrap样式: 首先需要下载ScrollPic.js这个插件 ...

  2. iscroll.js移动端滚动插件

    <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>is ...

  3. jaliswall.js图片瀑布流插件

    下载地址 jaliswall.js图片瀑布流插件,jQuery响应式瀑布流布插件jaliswall dd:

  4. jquery.photoClip.js图片上传插件带拖动裁剪

    下载地址 jquery.photoClip.js是一款图片上传插件,可以拖动选择裁剪的区域. dd:

  5. html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件

    这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...

  6. Viewer.js 图片预览插件

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

  7. 微信JS图片上传与下载功能--微信JS系列文章(三)

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){va ...

  8. js图片上传预览功能

    最近项目中用到的图片上传前预览功能,兼容IE6-9,FF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. jquery简单多图片前后滚动插件

    (function($) {$.fn.slidePicture = function(options) {var ops = $.extend({}, $.fn.slidePicture.defaul ...

最新文章

  1. android qq第三方登录,Android调用第三方QQ登录代码分享
  2. 2021信号与系统一流课程申请-说课视频规划
  3. 如何向微软提交 Windows 7 测试反馈
  4. 关于perl中DBD for Oracle的安装
  5. 【从零入门 Web 前端】HTML5 + CSS 简明教程
  6. 三极管和MOS管有什么不一样?用MOS管还是三极管?
  7. Android选项切换条SHSegmentControl
  8. java list翻转_JAVA实现两种方法反转单列表
  9. 控件中数据模板禁用小键盘减号折叠
  10. java点击图片发出声音_Java 中图片和声音文件的加载
  11. html 判断为空js,JavaScript判断DIV内容是否为空的方法
  12. Postman 导出 curl命令 到命令行运行 Mac OS
  13. C++程序设计:字符图形输出(数字三角形)
  14. 如何提高工作杠杆率?卖得更贵与卖出更多次
  15. Mac Gradle 5.0安装
  16. ping检测整个网段地址在线
  17. 2356,2372,2377,2388,2394
  18. html表单页面css样式代码,前端html表单与css样式(示例代码)
  19. ftp服务器上传创建文件夹权限设置密码,ftp服务器如何创建文件夹权限设置
  20. 快手公会入驻需要什么条件?

热门文章

  1. linux 宝塔镇河妖
  2. 数字ic验证学习ing
  3. 请求静态资源出现416 (Requested range not satisfiable) 错误
  4. java面试之每天五题
  5. delegate 用法
  6. 第四届橙瓜网络文学奖暨见证·网络文学20年评选年度奖项结果揭晓
  7. apt-get install 与 pkg-config
  8. 全球及中国留学咨询服务行业运营形势与发展前景分析报告2022版
  9. 升级sp3后出现:一个问题阻止windows正确检测此机器许可证--解决方案
  10. 卷毛机器人符文_关于卷毛分享锤石天赋攻略