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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python中import机制详解
2017/11/14 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python实现二分查找算法
2020/09/18 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
营销计划书范文
2015/01/17 职场文书
戒赌保证书
2015/05/11 职场文书
就业意向书范本
2015/05/11 职场文书
感恩教师节主题班会
2015/08/12 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
MySQL创建管理LIST分区
2022/04/13 MySQL
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL