非常轻,快jQuery幻灯片的效果

所属分类:媒体-幻灯片和轮播图

 53185  328  查看评论 (3)
分享到微信朋友圈
X
非常轻,快jQuery幻灯片的效果 ie兼容10

如何使用它:

添加jquery.skippr.css、jquery.skippr.js和jquery库到你页面的head位置。

注意jquery.skippr.css一定要添加到jquery.skippr.js之前

<head>
    <title>Your Awesome Website</title>       
    <link rel="stylesheet" href="css/jquery.skippr.css">
</head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="skippr/js/jquery.skippr.js"></script>


创建一个div元素用于每个幻灯片,并添加一个背景图像和css或样式属性。Skippr目标div标签内的所选元素background-images应用。把这个目标元素在一个容器元素的风格和定位。目标元素将完全填满它的父容器元素。

<div id="random">
    <div class="yellow"></div>
    <div style="background-image: url(img/test2.jpg)"></div>
    <div style="background-image: url(img/test5.jpg)"></div> 
    <div style="background-image: url(img/test3.jpg)"></div>                   
    <div style="background-image: url(img/test4.jpg)"></div>
</div>


调用插件关联对应的id

<script>
    $(document).ready(function() {
        $("#random").skippr();
        $("#random2").skippr({
                navType: 'bubble',
                autoPlay: true,
                autoPlayDuration: 2000
        });
    });
</script>


相关插件-幻灯片和轮播图

jQuery轮播图带切换进度显示

基于jQuery SuperSlide 实现的轮播图带切换进度显示
  幻灯片和轮播图
 20246  225

js 3D立体相册

这是一个照片墙,通过鼠标点击来实现照片的播放,具有3D立体效果,代码简单有详细的注释。
  幻灯片和轮播图
 46381  394

iSlider手机端图片滑动切换插件

iSlider.js手机幻灯片代码制作手指滑动手机端图片轮播代码
  幻灯片和轮播图
 79612  497

jQuery无缝滚动轮播图(原创)

各大网站常用的轮播图滚动效果,自动轮播,左右按钮切换
  幻灯片和轮播图
 21783  201

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Jevirs的QQ 0
    2015/1/25 16:18:00
    太容易出bug了,计时器和手动冲突后就只能显示一半的图片了 回复
    时光小屋 0
    2014/8/8 17:09:00

    不太好改,这个用了很多CSS3属性。

    回复
    济公 0
    2014/8/8 12:37:00

    貌似IE8不兼容啊,有什么解决的办法吗?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复