jcarousellite.js 基于Jquery的图片无缝滚动插件_jquery

1.引入JS库,jquery.js脚本和插件脚本jcarousellite.js。

复制代码 代码如下:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>

2.需要被展现的HTML结构 div>ul>li>img ,结构比较清晰

复制代码 代码如下:

<div>
<ul>
<li><img src="1.jpg" alt="" width="100" height="100" ></li>
<li><img src="2.jpg" alt="" width="100" height="100" ></li>
<li><img src="3.jpg" alt="" width="100" height="100" ></li>
<li><img src="4.jpg" alt="" width="100" height="100" ></li>
</ul>
</div>

3.执行启动脚本

复制代码 代码如下:

$(function() {
$(".default .jCarouselLite").jCarouselLite({
btnNext: ".default .next",
btnPrev: ".default .prev"
});
});

官方网站演示:http://demo.jb51.net/js/jcarousellite2/index.htm
打包演示下载:http://www.jb51.net/jiaoben/33787.html

时间: 2024-10-03 00:25:11

jcarousellite.js 基于Jquery的图片无缝滚动插件_jquery的相关文章

editable.js 基于jquery的表格的编辑插件_jquery

我的思路是这样的: 1.对任何一个 table, tr 都可以添加编辑.删除功能--功能独立 2.可以自动的完成编辑.取消功能,如点击编辑, 表格内容自动变成编辑框.下拉框等, 点击取消结束编辑状态 3.添加删除.确定(即更新)事件--只需要添加自己服务端的删除.更新代码就可以 4.能够自定义设置可编辑列,不可编辑列--方便定制编辑功能 下面是我实现的功能代码: editable.js 复制代码 代码如下: /* code: editable.js version: v1.0 date: 201

基于jQuery的上下无缝滚动应用(单行或多行)_jquery

Mr.Think的个人博客 @专注前端技术,热爱PHP,崇尚简单生活. 返回文章页:基于jQuery的上下无缝滚动应用(单行或多行) 单行应用 简易的点击展开/关闭效果(原生JS版和JQ版) 2010年08月02日 (6) getElementsByTagName的简写方式 2010年06月24日 (4) 一个简单的鼠标划过切换效果 2010年05月23日 (4) 奇或偶数行高亮显示及鼠标划过高亮显示类 2010年05月05日 (5) 一个简单的纵横向动画效果类 2010年05月02日 (4)

基于编写jQuery的无缝滚动插件_jquery

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

基于jQuery实现的QQ表情插件_jquery

不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

基于jQuery的图片左右无缝滚动插件_jquery

在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

JQuery控制图片无缝滚动

经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html></html>这样子的,没有加上documentType标签,不符合"标准". 于是自己套上了标准之后再改了一下,发现在firefox中还是滚动不起来,知道肯定是某些地方的js只适用于IE吧,也懒得慢慢找了,直接用jquery来制作. 图片无缝向左滚动的代码如下:   <

基于jQuery的上下无缝滚动代码

核心代码 详解请参考注释.  代码如下 复制代码 $(function(){  var _wrap=$('ul.line');//定义滚动区域  var _interval=2000;//定义滚动间隙时间  var _moving;//需要清除的动画  _wrap.hover(function(){   clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动  },function(){   _moving=setInterval(function(){    var

基于jquery多张缩略图滚动插件示例

最近闲暇时间,写了个多张图片水平.竖直滚动的jquery插件(如果是单张的,可以见我以前写的文章xdmJS应用之JS图片循环轮播图(图片循环滚动)),插件内容如下:  代码如下 复制代码 /* @plugName: jquery.breviaryScroll.js @company: baidu.com @author: by xudeming@baidu.com @data: 2013-06-08 @blog: http://www.css119.com */ (function($){   

Hallo.js基于jQuery UI所见即所得的Web编辑器_jquery

先看看效果: Hallo.js是一个简单的富文本Web编辑器,基于jQuery UI并且利用HTML5的contentEditable实现所见即所得.其目标并不是取代当今非常流行的编辑器,如 TinyMCE 或 Aloha Editor,而是给开发者提供一种更简单.更愉快的用户编辑体验. Hallo.js是由Henri Bergius为IKS项目开发的一款免费软件,使用CoffeeScript开发,遵循MIT许可协议,托管在GitHub上. 使用方法 1.你需要将jQuery.jQuery UI