推荐一款手机端的图片滑动插件iSlider

首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html

这是demo

众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢?

这个插件吸引我的有两点,

一是它不依赖与jquery,采用原生代码书写。二是它使用起来非常容易,而且除了图片,还支持普通的dom元素,滑动方式多样,效果丰富。

但是它也有些缺点,其一就是它提供的接口太少了。

在为轮播图片提供一些功能按钮时,比如说,上一张、下一张、自动播放等。使用这个插件就有些力不从心了,它本身所提供的按钮相当的死板,如果你用过,你一定会同意我说的。但是在我不死心看了它的源码后,突然有了一种山重水复疑无路,柳暗花明又一村的感觉。

我发现,源码中的iSlider对象的原型中,提供了很多的方法,这些方法可以实现我上述提到的一些功能。

我在这里详细的说明一下。首先,图片轮播的功能由iSlider这个对象来提供,在js中,我们只要创建一个iSlider对象的实例,并且将一些参数传递给它,就可以实现轮播功能。

获取到这个实例后,假设这个实例为islider,通过islider.slideIndex可以知道当前图片的序号,这个值可以作为参数。

实例中有一个方法,slideTo。这个方法接受一个数值,可以滑动到对应的序号的图片。图片的总数可以由传给iSlider的图片信息这个参数来获得。这个参数是一个数组。

这样完全可以在自定义按钮中实现一些功能。

另外,原型中还提供了pause、play等方法,通过这些方法,可以实现很多的功能。

时间: 2024-10-07 09:02:41

推荐一款手机端的图片滑动插件iSlider的相关文章

帝国cms 图片相对路径绝对路径设置问题+帝国cms 手机端调用图片问题

首先说第一个问题:帝国cms 图片相对路径绝对路径设置问题 这个是直接在后台可以设置的: 系统--系统设置--系统参数设置--基本属性--修改附件地址-- /d/file/(相对路径) http://www.qyhongyan.com/d/file/(绝对路径) 解决上面问题的前提是在制作之初就选定,不然后期改回很纠结的 从上面问题我们又会衍生出新的问题: 1.使用绝对路径:pc调用正常,手机调用也正常,但是有一个问题就是不可"移植" 如果域名更换,所有的图片链接全部失效,需要重新上传

设置背景图片的两种方式,并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

推荐几款高质量的图片网站

推荐几款高质量的图片网站 能你还不知道在用的哪些高质量的图片网站,是不是有点out了哈 ~ 今天良心推荐,下面推荐几个热门.国内主题摄影.小众图库.COO图片搜索引擎.PPT大背景图片.矢量图标类.建筑绘图类及其他相关的网站应有尽有!欢迎转发~ 目录一.热门网站二.国内主题摄影三.小众图库四.CCO图片搜索引擎五.PPT大背景图片六.矢量图标类七.建筑绘图类八.其他 一.热门网站1)Pixabayhttps://pixabay.com/ 2)unsplashhttps://unsplash.co

推荐10款免费而优秀的图表插件

开发人员很多时候需要使用图表来表现一些数据,而一张图表往往能够比几行密密麻麻的数字表格更能直观地展示数据内容.随着Web技术的发展,从传统只能依靠于flash.IE的vml,各个浏览器尚不统一的svg,到如今规范统一的canvas.svg为代表的html5技术,表现点.线.面要素的技术已经越来越规范成熟.我在本篇文章中收集了10款免费开源且比较优秀的图表制作插件,以供各位参考. 1,ichartjs(国产) ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业于南昌大学

推荐15款最佳的 jQuery 分布引导插件

当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体验真正有用,将引导您轻松创建网站的指引功能,并帮助您自定义并实现令人惊叹的外观. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码

19个非常有用的 jQuery 图片滑动插件和教程

jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天这篇文章向大家分享19个非常有用的 jQuery 图片滑动插件和教程. Slides Smooth Div Scroll Create an Image Rotator with Description Animate Panning Slideshow with jQuery Create a S

一款手机端的jQuery图片滑块插件

今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式,可以有平移.翻转.旋转和幻灯片模式,动画效果非常不错. 在线预览   源码下载 实现的代码: <h4 style="text-align: center"> animateType参数中设置,目前支持default, rotate, flip 和 depth, 点击按钮看效果&

手机端全屏滑动方法

最近做了一个手机端的微信分享领红包的项目,在这个项目中需要用到一个全屏滑动的功能,所以自己就根据网上查找的相关资料再通过自己的改造,封装了一个滑动的插件,这个插件可以实现以下几个功能: 指定水平/垂直滑动 指定滑动的回调函数 下面是具体的代码: 1 ;(function(root){ 2 'use strict'; 3 function touch(opts){ 4 5 this.canvas = opts.dom; 6 this.section = opts.section; 7 this.d

推荐15款创建漂亮幻灯片的 jQuery 插件

对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插件,以美丽夺目的方式显示的作品. 网络上有很多的 jQuery 幻灯片插件,很难决定哪一个更好.因此,我们编辑了15款目前比较优秀的 jQuery 幻灯片插件,帮助你用一个美丽的和创新的方式展示你的图片或者视频列表.如果你有熟悉的任何其他幻灯片插件,请与我们的读者分享您的反馈. 您可能感兴趣的相关文