HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

jQuery和CSS3交叉滑动幻灯片特效插件

2016-4-22 10:59| 发布者: admin| 查看: 13712| 评论: 1|来自: jQuery之家

摘要: jSlides是一款效果非常炫酷的jQuery和CSS3交叉滑动幻灯片特效插件。该幻灯片特效不用任何外置的CSS代码,可以制作出带缩略图的交叉滑动显示图片的幻灯片效果。 ...

  简要教程

  jSlides是一款效果非常炫酷的jQuery和CSS3交叉滑动幻灯片特效插件。该幻灯片特效不用任何外置的CSS代码,可以制作出带缩略图的交叉滑动显示图片的幻灯片效果。

 

查看演示       下载插件

 

  使用方法

  使用该幻灯片插件需要在页面中引入jquery和jSlides.js文件。

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


  HTML结构

  该幻灯片的HTML结构非常简单,使用一个<div>容器来包裹需要显示的图片。

<div class="slider">
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
</div>


  初始化插件

  在页面DOM元素加载完毕之后,可以通过jSlides()方法来初始化该幻灯片插件。

$('.slider').jSlides({
  img1: {h2:'Slide 1', h3:'I am slide 1'},
  img2: {h2:'Slide 2', h3:'I am slide 2'},
  img3: {h2:'Slide 3', h3:'I am slide 3'},
  img4: {h2:'Slide 4', h3:'I am slide 4'},
  img5: {h2:'Slide 5', h3:'I am slide 5'},
});

  其中,可以为每一张图片通过对象的方式传入标题和描述文本。

 

  配置参数

  该幻灯片可用的配置参数有:

  autoplay:是否自动播放。默认为false。

  time:过渡动画的时间,单位毫秒,默认为3000。

  width:幻灯片的宽度,默认为1280像素。

  height:幻灯片的高度,默认为500像素。

$('.slider').jSlides({
  img1: {h2:'Slide 1', h3:'I am slide 1'},
  img2: {h2:'Slide 2', h3:'I am slide 2'},
  img3: {h2:'Slide 3', h3:'I am slide 3'},
  img4: {h2:'Slide 4', h3:'I am slide 4'},
  img5: {h2:'Slide 5', h3:'I am slide 5'},
  autoplay: true,
  time: 3000,
  width: 1280,
  height: 500
});             

  jSlides幻灯片插件的github地址为:https://github.com/txn513/jSlides

 

  来源:jQuery之家

更多

相关阅读

发表评论

最新评论

引用 linedd963 2017-4-6 22:13
要克服生活的焦慮和沮喪得先學會做自己的主人 想交個朋友:男人尋樂秘密基地+L I N E:d d 9 6 3

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-16 01:01

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部