详细内容请点击

初始化插件：

一款基于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. HTML第九天学习笔记

    今天就继续看了下浮点float属性,代码如下: <html> <head> <title>CSS float属性</title> <meta ht ...

  2. ThreadPool for Delphi

    http://sourceforge.net/projects/threadpoolpas/ http://hivelocity.dl.sourceforge.net/project/threadpo ...

  3. Windows性能计数器2

    判断瓶颈 Ø 判断应用程序的问题 如果系统由于应用程序代码效率低下或者系统结构设计有缺陷而导致大量的上下文切换(context switches/sec显示的上下文切换次数太高)那么就会占用大量的系统 ...

  4. Swift学习笔记十二

    方法 方法就是和某种特定类型相关联的函数.类.结构体.枚举都可以定义实例方法和类型方法.类型方法和OC中的类方法类似. 结构体和枚举也可以定义方法是Swift与C/OC之间很大的一个区别,在OC中,只 ...

  5. Codeforces Round #188 (Div. 2) C. Perfect Pair 数学

    B. Strings of Power Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/318/p ...

  6. GLSL-几何着色器详解跟实例（GS：Geometry Shader）[转]

    [OpenGL4.0]GLSL-几何着色器详解和实例(GS:Geometry Shader) 一.什么是几何着色器(GS:Geometry Shader) Input Assembler(IA)从顶点 ...

  7. Java IO之File

    FILE类是用来实现获取文件.文件夹的类库工具,File并不是像类名所表示的那样仅仅是用来表示文件.它还能够用来表示文件夹. 所以能够用File来获取一个文件夹下的全部文件,甚至是文件夹中的文件. 一 ...

  8. 怎样利用App打造自明星实现自盈利

    怎样利用App打造自明星实现自盈利 1.了解各个概念       为了大家都能看懂这篇文章,先说明几个概念.        App(Application):能够在移动设备上使用,满足人们咨询.购物. ...

  9. centos 6.3 搭建git/gitosis/gitweb

    1. git的安装和配置 (1)使用yum源安装git yum install git (2)创建git用户并设置密码 #useradd --home /home/git git #passwd gi ...

  10. h5-3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...