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 图片等比例缩放代码
May 13 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
ionic实现底部分享功能
May 11 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
a标签调用js的方法总结
Sep 05 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
python文件读取失败怎么处理
2020/06/23 Python
python自动化发送邮件实例讲解
2021/01/04 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
理工科学生的自我评价
2013/12/15 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
教师党员整改措施
2014/10/24 职场文书
2015年度保密工作总结
2015/04/24 职场文书
2016春节放假通知范文
2015/08/18 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python