详细内容请点击

初始化插件：

一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型
$(".slideInner").slide({
slideContainer: $('.slideInner a'),
effect: 'easeOutCirc',//动画类型
autoRunTime: 5000,//自动轮播时间
slideSpeed: 1000,//速度
nav: true,//是否显示左右导航
autoRun: true,//是否自动滚动
prevBtn: $('a.prev'),//左按钮
nextBtn: $('a.next')//右按钮
});
兼容性： ie8+、google、firefox、360、QQ、欧朋、safi
html实例：
slides默认会为个个滑块里面的类名为moveElem的元素添加上动画的效果 元素上的rel属性则是设置对应的 延迟执行时间和动画类型两个属性 每个滑块内可同时添加多个元素
<body>
<div class="slides">
<div class="slideInner">
<a href="#" style="background: url(img/slide1.jpg) no-repeat;">
<div class="moveElem img1" rel="0,easeInOutExpo">
<img src="img/slide1p1.png" />
</div>
<div class="moveElem img2" rel="150,easeInOutExpo">
<img src="img/slide1p2.png" />
</div>
</a>
<a href="#" style="background: url(img/slide2.jpg) no-repeat">
<div class="moveElem img1" rel="0,easeInOutExpo">
<img src="img/slide2p1.png" />
</div>
</a>
<a href="#" class="slide3" style="background: url(img/slide3.jpg) no-repeat;">
<div class="moveElem img1" rel="0,easeInOutExpo">
<img src="img/slide3p1.png" />
</div>
<div class="moveElem img2" rel="150,easeInOutExpo">
<img src="img/slide3p2.png" />
</div>
<div class="moveElem img3" rel="300,easeInOutExpo">
<img src="img/slide3p3.png" />
</div>
</a>
<a href="#" style="background: rgb(113, 209, 231);">
<div class="moveElem img1" rel="0,easeInOutExpo">
<img src="img/slide1p1.png" />
</div>
<div class="moveElem img2" rel="150,easeInOutExpo">
<img src="img/slide1p2.png" />
</div>
</a>
<a href="#" style="background: rgb(178, 44, 44);">
<div class="moveElem img1" rel="0,easeInOutExpo">
<img src="img/slide1p1.png" />
</div>
<div class="moveElem img2" rel="150,easeInOutExpo">
<img src="img/slide1p2.png" />
</div>
</a>

</div>
<div class="nav">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
</div>
</body>
Github地址：https://github.com/727712787/jquery.slides

立即下载

更多jQuery内容请点击

jQuery无缝循环开源多元素动画轮播jquery.slides插件的更多相关文章

  1. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  2. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  4. javascript无缝流畅动画轮播，终于让我给搞出来了。

    自己一直想写一个真正能用的轮播图,以前是写过一个,但是不是无缝的轮播,感觉体验很差,这个轮播之前也搞了很多实例,看了很多代码,但是脑子总转不过弯,为什么在运动到一定距离后可以突然转回到原始位置,而没有 ...

  5. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  6. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  7. JavaScript--缓动动画+轮播图

    上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  8. 鸿蒙开源第三方件组件——轮播组件Banner

    目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...

  9. 图片轮播(Jquery)

    昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用. 经过调整和整合,完成了第一版本的jquery. ...

随机推荐

  1. Python学习入门基础教程(learning Python)--5.1 Python下文件处理基本过程

    Python下的文件读写操作过程和其他高级语言如C语言的操作过程基本一致,都要经历以下几个基本过程. 1. 打开文件 首先是要打开文件,打开文件的主要目的是为了建立程序和文件之间的联系.按程序访问文件 ...

  2. 一位Erlang程序猿的自白

    12.00 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 /* Style De ...

  3. [MySQL复制异常]'Cannot execute statement: impossible to write to binary log since statement is in row format and BINLOG_FORMAT = STATEMENT.'

    MySQL复制错误]Last_Errno: 1666 Last_Error: Error executing row event: 'Cannot execute statement: imposs ...

  4. wget 命令用法详解

    wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能和特点:(1)支持断点下传功能:这一点,也是网络蚂蚁和Fl ...

  5. DedeCMS调用多说评论系统遇到的一些问题

    最近前端笔记加入了多说的评论,因为自带的评论太渣了.过程不是很顺利,把遇到的问题和大家分享下.我用的dedecms,所以使用的是dede的多说评论模块.效果图: 多说官方下载:http://dev.d ...

  6. 大话数据结构—平衡二叉树(AVL树)

    平衡二叉树(Self-Balancing Binary Search Tree/Height-Balanced Binary Search Tree),是一种二叉排序树,当中每个节点的左子树和右子树的 ...

  7. 【JavsScript】当 JavaScript 从入门到提高前需要注意的细节：变量部分

    在javaScript中变量使用var声明的变量是当前作用域的变量,不使用var声明的则肯定是全局变量. http://msdn.microsoft.com/zh-cn/library/dn64545 ...

  8. python的print(转)

    转载:http://www.pythonclub.org/python-basic/print   使用print输出各型的 字符串 整数 浮点数 出度及精度控制 strHello = 'Hello ...

  9. Android （cocos2dx 网络访问）访问权限设置

    Android开发应用程序时,如果应用程序需要访问网络权限,需要在 AndroidManifest.xml 中加入以下代码: 同样的如果用到其它的权限,也需要作出声明,部分权限列表如下: androi ...

  10. MySQL mysqldump数据导出详解 --dump-slave 注意事项

    http://www.cnblogs.com/chenmh/p/5300370.html 介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用非常频繁的一个工 ...