详细内容请点击

初始化插件：

一款基于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. ps:探索按钮按起落下的技巧

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-07-10) 先上图: 那个看上去想按下去的,那个看上去像自然地呢? 显而易见: 第一像按下去的,第二个像自然地. 原因: 渐变: ...

  2. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  3. [置顶] Android AlarmManager实现不间断轮询服务

    在消息的获取上是选择轮询还是推送得根据实际的业务需要来技术选型,例如对消息实时性比较高的需求,比如微博新通知或新闻等那就最好是用推送了.但如果只是一般的消息检测比如更新检查,可能是半个小时或一个小时一 ...

  4. CMSIS Example - Signal and Yield

    /*---------------------------------------------------------------------------- * RL-ARM - RTX *----- ...

  5. PS-文字如何竖排版

    单击文字输入工具“T”按钮,点住鼠标左键不要松手,会在“T”按钮的右边显示出其它形式的文字工具,拖动鼠标指向“直排文字”工具就可以了.

  6. linux下的文件操作——批量重命名

    概述:在日常工作中,我们经常需要对一批文件进行重命名操作,例如将所有的jpg文件改成bnp,将名字中的1改成one,等等.文本主要为你讲解如何实现这些操作 1.删除所有的 .bak 后缀: renam ...

  7. MyEclipse7.0破解下载

    MyEclipse7.0 下载地址:downloads.myeclipseide.com/downloads/products/eworkbench/7.0M1/MyEclipse_7.0M1_E3. ...

  8. GCT考试如何准备

    备战考试篇 回首连续的3个月的那段复习过程,感受颇多颇深!以下就各科复习,我谈谈自己的感受和经验: 语文复习: 语文主要是考察你的文学功底和素养以及已经具备的工作生活的常识.从03,04两年的考试真题 ...

  9. iOS- SQLite3的基本使用

    iOS- 简单说说iOS移动客户端SQLite3的基本使用  1.为什么要使用SQLite3?   •大量数据需要存储 •管理数据,存储数据   SQLite是一种关系型数据库(也是目前移动客户端的主 ...

  10. [C.Sharp] TimeSpan的用法，获取测试程序运行时间

    TimeSpan的用法 TimeSpan是用来表示一个时间段的实例,两个时间的差可以构成一个TimeSpan实例,现在就来简单介绍一下几点重要的用法: a 先来介绍几个方法 TimeSpan.Minu ...