jQuery旋转木马式幻灯片轮播特效


Posted in Javascript onDecember 04, 2015

本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效。具体内容如下

特点

  • 响应式——适应任何视窗的宽度
  • 混合内容
  • 不需要CSS
  • 轻量级(< 8 kb未压缩)
  • 基于jQuery构建
  • 集成图像预加载
  • 回调函数——onConstruct onStart,onEnd
  • 多个可配置选项
  • 延迟加载图片
  • 自动旋转
  • 容易扩展

jquery实例:anoSlide使用方法

引入核心文件

<script src="js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anoslide.js"></script>

写入基础CSS样式,可根据项目完全自定义

.carousel {
  position: relative;
  min-height: 20px;
  height: auto !important;
  height: 20px;
  background: url(images/loader.gif) center center no-repeat;
}
.carousel .next, .carousel .prev {
  display: none;
  width: 56px;
  height: 56px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-top: -28px;
  z-index: 9999;
  cursor: pointer;
}
.carousel .prev {
  margin-left: -60px;
  background: url(images/prev.png) 0 0 no-repeat;
}
.carousel .next {
  margin-right: -60px;
  background: url(images/next.png) 0 0 no-repeat;
}
.carousel li {
  display: none;
}
.carousel li img {
  width: 100%;
  height: auto;
}
.paging {
  position: absolute;
  z-index: 9998;
}
.paging > a {
  display: block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  float: left;
  background: url(images/dots.png) 0px -40px no-repeat;
}
.paging > a:hover, .paging > a.current {
  background: url(images/dots.png) 0px 0px no-repeat;
}
.badge {
  display: block;
  width: 104px;
  height: 104px;
  background: url(images/badge.png) 0 0 no-repeat;
  z-index: 9000;
  position: absolute;
  top: -3px;
  left: -3px;
}
img {
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none;   /* Firefox all */
  -ms-user-select: none;   /* IE 10+ */
  -o-user-select: none;
  user-select: none;
}

jquery旋转木马anoSlide混合显示

jQuery旋转木马式幻灯片轮播特效

JS

$('.carousel ul').anoSlide(
{
  items: 1,
  speed: 500,
  prev: 'a.prev',
  next: 'a.next',
  lazy: true,
  auto: 4000
})
html
<div class="carousel">
  <a class="prev"></a>
  <ul>
    <li>Content goes here</li>
    <li>Content goes here</li>
    <li>Content goes here</li>
  </ul>
  <a class="next"></a>
</div>

jquery幻灯片anoSlide多图

jQuery旋转木马式幻灯片轮播特效

JS

$('.carousel[data-mixed] ul').anoSlide(
{
  items: 5,
  speed: 500,
  prev: 'a.prev[data-prev]',
  next: 'a.next[data-next]',
  lazy: true,
  delay: 100})

HTML

<div class="carousel" data-mixed=""> <a class="prev" data-prev=""></a>
 <ul>
  <li>
   <div class="wrap">
    <figure><img data-src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure>
   </div>
  </li>
  <li>
   <div class="wrap">
    <figure><img data-src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure>
   </div>
  </li>
 </ul>
 <a class="next" data-next=""></a> </div>

jquery旋转木马anoSlide分页

jQuery旋转木马式幻灯片轮播特效

js

$('.carousel ul').anoSlide(
{
  items: 1,
  speed: 500,
  prev: 'a.prev[data-prev-paging]',
  next: 'a.next[data-next-paging]',
  lazy: true,
  onConstruct: function(instance)
  {
    var paging = $('<div/>').addClass('paging fix').css(
    {
      position: 'absolute',
      top: 1,
      left:50 + '%',
      width: instance.slides.length * 40,
      marginLeft: -(instance.slides.length * 40)/2
    })
     
    /* Build paging */
    for (i = 0, l = instance.slides.length; i < l; i++)
    {
      var a = $('<a/>').data('index', i).appendTo(paging).on(
      {
        click: function()
        {
          instance.stop().go($(this).data('index'));
        }
      });
       
      if (i == instance.current)
      {
        a.addClass('current');
      }
    }
 
    instance.element.parent().append(paging);
  },
  onStart: function(ui)
  {
    var paging = $('.paging');
     
    paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
  }
})

html

<div class="carousel">
  <a class="prev"></a>
  <ul>
    <li>Content goes here</li>
    <li>Content goes here</li>
    <li>Content goes here</li>
  </ul>
  <a class="next"></a>
</div>

jquery幻灯片anoSlide标题

jQuery旋转木马式幻灯片轮播特效

js

$('.carousel.captions ul').anoSlide(
{
  items: 1,
  speed: 500,
  prev: 'a.prev[data-prev-caption]',
  next: 'a.next[data-next-caption]',
  lazy: true,
  onStart: function(ui)
  {
    /* Remove existing caption in slide */
    ui.slide.element.find('.caption').remove();
  },
  onEnd: function(ui)
  {
    /* Get caption content */
    var content = ui.slide.element.data('caption');
     
    /* Create a caption wrap element */
    var caption = $('<div/>').addClass('caption').css(
    {
      position: 'absolute', 
      background: 'rgb(0,0,0)',
      color: 'rgb(255,255,255)',
      textShadow: 'rgb(0,0,0) -1px -1px',
      opacity: 0.5,
      top: -100,
      left: 50,
      padding: 20,
      webkitBorderRadius: 5,
      mozBorderRadius: 5,
      borderRadius: 5
    }).html(content);
     
    /* Append caption to slide and animate it. Animation is really up to you. */
    caption.appendTo(ui.slide.element).animate(
    {
      top:50
    });
  }
})

html

<div class="carousel captions">
  <a class="prev" data-prev-caption></a>
  <ul>
    <li data-caption="Adding captions is really easy">
      <figure><img data-src="images/slides/1.jpg" src="" /></figure>
    </li>
    <li data-caption="anoSlide's callback functions can be used for adding Captions">
      <figure><img data-src="images/slides/2.jpg" src="" /></figure>
    </li>
    <li data-caption="<span style='color:#00f0ff'>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not.">
      <figure><img data-src="images/slides/3.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img data-src="images/slides/4.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img data-src="images/slides/5.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img data-src="images/slides/6.jpg" src="" /></figure>
    </li>
    <li>
      <figure><img data-src="images/slides/7.jpg" src="" /></figure>
    </li>
  </ul>
  <a class="next" data-next-caption></a>
  <a class="badge"></a>
</div>

以上就是关于jQuery旋转木马式幻灯片轮播特效,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
jQuery中cookie插件用法实例分析
Dec 04 #Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 #Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 #Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 #Javascript
给before和after伪元素设置js效果的方法
Dec 04 #Javascript
全面解析Bootstrap手风琴效果
Apr 17 #Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 #Javascript
You might like
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Python模块常用四种安装方式
2020/10/20 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
当当网软件测试笔试题
2015/11/24 面试题
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
高中体育课教学反思
2016/02/16 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸