响应式 jQuery 滑块插件 – iView Slider

iView Slider 是一款优秀的 jQuery 幻灯片滑动展示插件,用于实现文本、图片、视频等各种网页内容的幻灯片滑动展示功能。iView Slider 支持响应式布局,能够很好的运行于平板、手机等触屏设备中。iView Slider 内置35种很炫的过渡效果(Transition Effects),能够帮助你制作出各种各样的滑动效果。

ixslider

View Slider  提供了三种不同形式的加载进度条形式,以生动直观的方式告诉用户下一个滑块还有多久时间加载。iView Slider 提供了如下几种浏览方式:

  • 幻灯片
  • 键盘控制
  • 前后按钮
  • 缩略图

iView Slider 依赖于  jQuery 和 Raphael,提供了简单易用的 API ,能够非常容易的实现漂亮的内容滑动效果,iView Slider 调用的基本示例代码如下:

<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script src="js/iview.js"></script>
<script>
    $(document).ready(function(){
        $('#iview').iView({
            pauseTime: 7000,
            directionNav: false,
            controlNav: true,
            tooltipY: -15
        });
    });
</script>

演示   下载 GitHub

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2011.11.21

    推荐一款HTML5 WordPress主题: MetroWP

    自从写了几款主题之后,就很少去为大家推荐主题了,今天发现一款完全免费的HTML5 WordPress主题,居然是Metro风格的,效果确实很棒,已经通过Wordpress官方收录,推荐给大家。 主题居然是国人制作的,整体效果还不错,只是细节方面还有点粗,但可以满足一下Windows8 Metro网络爱好者的审美需求。 下载地址:http://wordpress.org/extend/themes/metrowp/

  2. 没有图片

    2009.10.22

    WordPress升级教程(菜鸟篇)

    Wordpress 2.8.5正式版已经出来,看到有网友留言问如何升级的问题,我就在这里把升级过程介绍一下,专门为新手站长们提供一个可参考的教程: 注:记得官方就有一篇文章里说过,WordPress不建议跨版本升级,跨版本升级最容易失败或出问题,因为新版本都在上一版本基础上改进的,相邻版本完全可以实现无缝升级,而跨版本就不敢保证!所以菠萝还是建议大家及时升级到最新版本。 一、WordPress后台自动升级: 在新版本的Wordpress发布之后,在你的后台会出现相应版本的提示,点击升级就会问你是自动升级还是手动下载升级?这时,你选择自动升级,只需要几秒时间,就可以完成整个系统升级,不需要你的任何设置。 二、WordPress手动升级: 1、用PHPMyAdmin或相关插件把你的数据库进行备份,省得升级失败数据全无! 2、备份你的配置文件wp-config.php (备份所有文件更安全); 3、进后台禁用所有插件,如不停可能造成升级失败; 4、上传所有 Wordpress文件覆盖现有文件; 5、上传wp-config.php文件; 6、运行“域名/wp-admin/upgrade.php”按提示进行升级完成。(多谢万戈提醒)

  3. 没有图片

    2010.03.27

    一招实现 CSS格式化 | CSS减肥

    今天写了个CSS样式表文件,感觉写完之后,有点乱乱的,格式也乱了,很多地方也出现了重复现象,菠萝找到一个非常简单的解决CSS格式化和CSS减肥的办法: 用W3C CSS进行错误和问题检测、修复,这个功能是非常强大的,开始我还有点害怕,就先备份了一下原来的CSS文件,之后大胆进行了检测和修复,哇靠!这么多的问题!系统会自动给你提供一个修复之后的CSS代码,这个代码就是完美无错的了!并且这个代码已经给你格式化好喽,直接使用就是。 这个工具可以对在线的CSS文件进行格式化和修复、可以自己上传CSS文件、也可以直接把你的代码复制过来。 菠萝指路=》 CSS Validator: http://jigsaw.w3.org/css-validator/ 如果你写的代码确保没有问题,那就只需要格式化就行了,这一操作不改变你的代码功能,只是进行格式化: 菠萝指路=》 CSS Format: http://www.lonniebest.com/FormatCSS/

  4. 没有图片

    2010.07.05

    Windows 8 应该实现的新功能

    通过对Windows 7的使用体验,在新的操作系统出来之前,我来总结一下Windows 8系统应该实现的新功能: 更佳的网络支持 我很喜欢Windows Vista中的网络和共享中心以及网络映射功能,当然,Windows 7中的HomeGroup功能也很不错。但Windows 7跟Linux和Mac组成网络时,那将会是很痛苦的一件事。因此,我希望WIndows 8能立即识别并与Linux和Mac组成网络。 提供真正的家庭多媒体共享支持 我们都知道,电 视很快就将走向衰退了,而电脑,尤其是有了Windows Media Center的存在,在家庭娱乐中的地位会越来越重要。因此,我认为在Windows 8有必要实现与电视、音箱以及其他多媒体设备之间的共享。当然,现在也 可以实现这样的功能,但过程有点过于复杂了。 改进任务栏和多任务切换 Windows 7中的超级任务栏可以说是Mac Dock和Windows传统任务栏的结合体。它既可以用来放置程序快捷方式,也可以用来切换窗口。但有时候这两者会很容易就混淆。因此,我觉得在 Windows 8中,微软应该再次对其进行改进,将这两者更完美地结合在一起。…

  5. 没有图片

    2010.01.23

    不用插件实现WordPress自定义日志缩略图的方法

    网有已经有很多文章介绍了WordPress缩略图的方法,在此,我继续啰嗦一下,不过也给添加一点新的东西,就是实现缩略图位置当有图片的时候显示图片,没有图片的时候,显示你想显示的东西,比如广告啦什么的。 在你的日志模板文件中找到你要显示图片的地方,把相应的显示图片的代码改成: <?php $image = get_post_meta($post->ID, 'thumb_image', true); ?>//设定自定义代码的名称 <?php if ( get_post_meta($post->ID, 'lead_image', true) ) : ?>//执行条件:有图片时候 <div><img width="336" height="280" src="<?php…

  6. 没有图片

    2010.03.15

    DEDECMS二级目录|一级目录|网站名标题SEO优化

    在DEDECMS标题中去掉斜线的办法一文中,我们去掉了标题中的“/”,本教程通过更改文件实现DEDECMS“二级目录|一级目录|网站名”标题SEO优化,方法如下: 找到include/typelink.class.php文件,大约在第164行: 把以下代码: $this->valuePositionName = $tinfos['typename'].$this->SplitSymbol.$this->valuePositionName; 修 改为 $this->valuePositionName = $this->valuePositionName.$this->SplitSymbol.$tinfos['typename']; 之后在标题代码部分修改变以下样式: <title>{dede:field.title/} - {dede:global.cfg_webname/}</title>

评论

  1. 烂番茄网 2014.07.06 1:17

    配图不想点进来都难哈。。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!