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

首先需要下载ScrollPic.js这个插件;

使用方法:

<SCRIPT language=javascript type=text/javascript>
<!--//--><![CDATA[//><!--
window.onload=function(){
//首先需要加载ScrollPic.js插件
var scrollPic_02 = new ScrollPic();
scrollPic_02.scrollContId = "ISL_Cont_1"; //内容容器ID
scrollPic_02.arrLeftId = "LeftArr";//左箭头ID
scrollPic_02.arrRightId = "RightArr"; //右箭头ID

scrollPic_02.frameWidth = 520;//显示框宽度(这个可以根据自己的需求进行更改)
scrollPic_02.pageWidth = 104; //翻页宽度

scrollPic_02.speed = 10; //移动速度(单位毫秒,越小越快)
scrollPic_02.space = 10; //每次移动像素(单位px,越大越快)
scrollPic_02.autoPlay = true; //自动播放
scrollPic_02.autoPlayTime = 4; //自动播放间隔时间(秒)

scrollPic_02.initialize(); //初始化

//--><!]]>
}
</SCRIPT>

ScrollPic.js——图片左右滚动插件的更多相关文章

  1. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  2. 图片文字滚动插件jQuery Scrollbox

    图片文字滚动插件jQuery Scrollbox附件中提供了五种图片.文字滚动样式,只需调用jquery库和jQuery Scrollbox插件,然后再加一段简单的jquery代码即可使用,兼容性良好 ...

  3. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  4. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  5. fullpage.js全屏滚动插件使用方法

    在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...

  6. FullPage.js全屏滚动插件学习总结

    如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...

  7. FullPage.js全屏滚动插件

    一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...

  8. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  9. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

随机推荐

  1. Python 类变量,成员变量,静态变量,局部变量

    局部 class TestClass(object): val1 = 100 def __init__(self): self.val2 = 200 def fcn(self,val = 400): ...

  2. css--float浮动

    前戏 前面我们学习了CSS相关的知识,现在试想一下,如果我们想把两个div放在一行显示,该怎么处理?前面也说过,div是块级标签,默认占一行,这时候如果想要达成效果,那就要用到float了 float ...

  3. Bootstrap历练实例:大的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. Bootstrap历练实例:弹出提示信息的样式按钮

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. 调用 C 动态库

    调用 C 动态库 由 王巍 (@ONEVCAT) 发布于 2015/11/04 C 是程序世界的宝库,在我们面向的设备系统中,也内置了大量的 C 动态库帮助我们完成各种任务.比如涉及到压缩的话我们很可 ...

  6. java面试宝典第三弹

    Http和Https的区别 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之 ...

  7. [LUOGU] P1024 选课

    题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学分,每门课有一 ...

  8. 【Java_多线程并发编程】基础篇—线程状态及实现多线程的两种方式

    1.Java多线程的概念 同一时间段内,位于同一处理器上多个已开启但未执行完毕的线程叫做多线程.他们通过轮寻获得CPU处理时间,从而在宏观上构成一种同时在执行的假象,实质上在任意时刻只有一个线程获得C ...

  9. django 12天(跨域,文件上传,下载,cookie,session)

    django 12天(跨域,文件上传,下载) 跨域 什么是跨域 1.协议不同 2.端口不同 3.主机不同 如何解决跨域 1.安装django-cors-headers模块 2.在settings.py ...

  10. mysql参数讲解

    MySQL配置参数详解: http://blog.csdn.net/wlzx120/article/details/52301383 深入理解mysql参数 http://blog.itpub.net ...