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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
微信小程序实现图片上传功能
May 28 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
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
基于mysql的bbs设计(一)
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python 实现随机数详解及实例代码
2017/04/15 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python中实现switch功能实例解析
2018/01/11 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
postman和python mock测试过程图解
2020/02/22 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
房地产销售员的自我评价分享
2013/12/04 职场文书
中学家长会邀请函
2014/02/03 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
幼师辞职信范文
2015/02/27 职场文书
纪录片信仰观后感
2015/06/08 职场文书
总经理聘用协议书
2015/09/21 职场文书
中学语文教学反思
2016/02/16 职场文书