详细内容请点击

初始化插件：

一款基于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. cocos2d_x iconv转码

    作者:何卫 转载请注明,原文链接:http://www.cnblogs.com/hewei2012/p/3374147.html iconv下载(Android) 源码下载地址,已编译完的iconv包 ...

  2. 【转】 Volley NegativeArraySizeException 解决

    http://blog.csdn.net/very_caiing/article/details/46241531 今天在百度统计看项目上有一个crash比较高的bug: Java.lang.Nega ...

  3. 在Assertion中获取Response的headers，获取headers中信息，获取body（content）

    // get the  headers of the requestdef content= messageExchange.getResponseContent()def headers = mes ...

  4. vimrc常用配置项

    设置行号 set nu 设置自动缩进 set autoindent 设置tab占n个字符 set tabstop=n 设置以空格代替tab(因为有部分场合不允许使用tab) set expandtab ...

  5. PS-添加前景色

    alt+Delete是填充前景色,即ps左边两个颜色块,前面的那个 ctrl+delete填充背景色

  6. 安装nodejs和grunt以后出现 /usr/bin/env: node: No such file or directory

    安装完成以后需要执行此命令 sudo ln -s /usr/bin/nodejs /usr/bin/node

  7. C#打包制作安装程序过程全记录

    该文是根据网上的文章并结合自己实际打包的过程而整理的. 开发平台:VisualStudio2005中文版. 步骤如下: 1. 创建一个安装向导项目或安装部署项目 新建项目-〉其他项目类型-〉安装与部署 ...

  8. OutputDebugString()

    坚定的 Win32 开发者可能对 OutputDebugString() API 函数比較熟悉,它能够使你的程序和调试器进行交谈.它要比创建日志文件easy,并且全部“真正的”调试器都能使用它.应用程 ...

  9. HDOJ 1914 The Stable Marriage Problem

    rt 稳定婚姻匹配问题 The Stable Marriage Problem Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 6553 ...

  10. 《linux性能及调优指南》

    http://blog.chinaunix.net/uid-26000296-id-4065871.html