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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 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中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python写的服务监控程序实例
2015/01/31 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python线程join方法原理解析
2020/02/11 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
电气工程师岗位职责
2014/01/01 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
大学三年计划书范文
2014/04/30 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
出生公证书
2015/01/23 职场文书
年底个人总结范文
2015/03/10 职场文书
金榜题名主持词
2015/07/02 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP