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

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

 53121  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带缩略图的轮播

通过点击缩略图或点击缩略图左右按钮进行切换
  幻灯片和轮播图
 65472  537

jQuery带缩略图轮播图插件SliderPro

jQuery基于SliderPro实现的左右布局带缩略图轮播图效果
  幻灯片和轮播图
 46075  453

幻灯片的简单实现

简单的幻灯片效果
  幻灯片和轮播图
 28236  330

3D图片轮播

带倒影效果的3D轮播图效果插件
  幻灯片和轮播图
 44546  458

讨论这个项目(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不兼容啊,有什么解决的办法吗?

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