jQuery插件slides实现无缝轮播图特效


Posted in Javascript onApril 17, 2015

初始化插件:

slides是一款基于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 下载地址:https://github.com/727712787/jquery.slides/archive/master.zip

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
详解vue 图片上传功能
Apr 30 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
js实现touch移动触屏滑动事件
Apr 17 #Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 #Javascript
JavaScript对象反射用法实例
Apr 17 #Javascript
深入分析Javascript跨域问题
Apr 17 #Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 #Javascript
JavaScript中split() 使用方法汇总
Apr 17 #Javascript
javascript模拟命名空间
Apr 17 #Javascript
You might like
深入array multisort排序原理的详解
2013/06/18 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
javascript事件问题
2009/09/05 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
暑假实习求职信范文
2013/09/22 职场文书
2015年校长新年寄语
2014/12/08 职场文书
求职自我评价范文
2015/03/09 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang