详细内容请点击

初始化插件：

一款基于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. 机器学习笔记之人工神经网络(ANN)

    人工神经网络(ANN)提供了一种普遍而且实际的方法从样例中学习值为实数.离散值或向量函数.人工神经网络由一系列简单的单元相互连接构成,其中每个单元有一定数量的实值输入,并产生单一的实值输出. 上面是一 ...

  2. mina高并发短连接导致java.io.IOException: Too many open files解决方案

    http://marsvaadin.iteye.com/blog/1698924 mina性能测试 http://hi.baidu.com/rendong/item/bb5d2b0e4563c76dd ...

  3. 使用Machin公式计算

    使用Machin公式计算,并使用百亿进制+末项位数控制,这里可算出数万位(比最简PI快80倍),源代码约40行,在本网页中. 计算公式 PI=16arctg(1/5)-4arctg(1/239),其中 ...

  4. Server对象的Execute方法

    Server 对象是专门为处理服务器上的特定任务而设计的,它提供了对服务器上的方法和属性的访问,通过调用这些方法和属性的设置,可以允许用户使用服务器上的许多功能,如可以取得服务器运行环境的功能,但最重 ...

  5. Windows创建自动化任务

    Windows创建自动化任务使得开机就打开相应的Python目录 1:计算机管理 2:找到任务计划程序 3:创建基本任务 4:任务触发器 5: 建立bat执行文件 start "" ...

  6. C# 二进制字节流查找函数IndexOf

    C# 二进制字节流查找函数IndexOf /// <summary> /// 报告指定的 System.Byte[] 在此实例中的第一个匹配项的索引. /// </summary&g ...

  7. 会吓人的概念证明病毒: Chameleon

    近期有这么一条新闻指出,有一对家长发现,黑客入侵了他们为10个月女儿所准备的婴儿监视器(baby monitor).该黑客除了远程操控该监视器的录像角度,还大声对着小孩喊叫.婴儿的爸爸冲进女儿房间后, ...

  8. 10分钟学会基于ASP.NET的 JQuery实例 (转)

    本文介绍如何在ASP.NET(ASP.NET/AJAX)里使用基于JQuery的AJAX技术.(源代码下载见最后) 在使用JQuery前,请到www.jquery.com下载最新版本的js代码,然后再 ...

  9. MVC网站发布常见问题

    直接发布的时候生成的bin会漏掉一些文件,从而导致网站无法访问: 解决方法:发布之后,再在本地运行一下网站,然后将运行后生成的bin文件夹下的文件拷贝到发布的文件夹目录下进行覆盖,就可以了

  10. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...