基于cssSlidy.js插件实现响应式手机图片轮播效果

cssSlidy是一款支持手机移动端的焦点图轮播插件，支持标题设置，滑动动画，间隔时间等。

在线实例

实例演示

使用方法

<div id="slidy-container">
<figure id="slidy">
<a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-caption="jQuery.nicescroll美化滚动条"></a>
<a href='#' target='_blank'><img src="img/4.jpg" alt="jQuery仿淘宝商品多属性查询" data-caption="jQuery仿淘宝商品多属性查询"></a>
<a href='#' target='_blank'><img src="img/3.jpg" alt="jQuery结合elevateZoom演示多种放大镜效果" data-caption="jQuery结合elevateZoom演示多种放大镜效果"></a>
<a href='#' target='_blank'><img src="img/2.jpg" alt="百度编辑器ueditor" data-caption="百度编辑器ueditor"></a>
</figure>
</div>
cssSlidy({
timeOnSlide: 5,
timeBetweenSlides: .5,
slidyContainerSelector: '#slidy-container',
slidySelector: '#slidy',
captionSource: 'data-caption',
captionBackground: 'rgba(0,0,0,0.5)',
captionColor: '#ff0',
captionFont: 'Raleway, Brittanic Bold, Hevetica, sans-serif',
captionPosition: 'bottom',
captionAppear: 'perm',
captionSize: '16px',
captionPadding: '1em',
/*fallbackFunction: function(){ alert("Oh noes! You can't animate!"); },*/
cssAnimationName: 'slidy'
});

参数详解

如果大家感兴趣的可以点击下载，下载源码哦！

以上所述是小编给大家介绍的cssSlidy.js插件实现响应式手机图片轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 非常优秀的JS图片轮播插件Swiper的用法

    最近在一个微信公众号中用到了swiper图片轮播插件.接下来为大家介绍插件的用法 首先需要下载Swiper 1:加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body

  • 深入解析js轮播插件核心代码的实现过程

    深入解析js轮播插件核心代码的实现过程

    轮播效果在网页中用的很多,swiper是其中最有代表性的作品,它支持水平和竖直滑动,还有反弹效果,兼容移动端和pc端.当然代码量也是相当大的,单是js就有5300行(3.4.0的未缩版本),若不考虑代码利用率和加载速度直接就用了,在移动端比较慎重,比如京东(m.jd.com)的轮播就没有用它,而是自己实现了类似的功能,代码量很少的样子(格式化之后看起来二三百行左右的样子).那么这个功能如果自己来实现,要怎么做呢? 准备工作 1. 准备几张图片(我这里放了四张) 2. 搭建目录结构(html+cs

  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • 原生JS实现旋转木马式图片轮播插件

    原生JS实现旋转木马式图片轮播插件

    本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看

  • Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

    在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car

  • 原生JS轮播图插件

    代码分两个部分:1.HTML部分,根据注释处理即可:2.play.js插件部分,引到HTML里面即可. 1.HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容,在实际项目中可以不要*/ * { margin: 0; p

  • jQuery插件学习教程之SlidesJs轮播+Validation验证

    SlidesJs(轮播支持触屏)--官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代码 <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http:/

  • js轮播图的插件化封装详解

    本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下 具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = u

  • BootStrap的JS插件之轮播效果案例详解

    BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js

    在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形.在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件--jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果--不知

随机推荐