简单实用的相册幻灯片效果SimpleSlide

所属分类：网页特效-焦点图/幻灯片,图片特效,悬浮层/弹出层

浏览：1581次评论：1次更新时间：2016-10-03

牛币素材VIP可免积分下载

查看演示立即下载收藏

简单实用的相册幻灯片效果SimpleSlide

查看演示立即下载

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

素材描述：Simple Slide一个简单实用的相册幻灯片效果

标签：幻灯片插件 Simple Slide simple Slide 相册 jQuery特效轮播图幻灯片 jQuery jquery插件

详细介绍

使用方法：

引入jQuery库文件、插件JS文件、CSS样式文件

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/simple.slide.min.js"></script>
<link rel="stylesheet" href="css/simple.slide.css" type="text/css">

演示实例1

<a href="javascript:;" i="img/1d.jpg" class="Slide Two"><img src="img/1.jpg" alt=""></a>
<a href="javascript:;" i="img/2d.jpg" class="Slide Two"><img src="img/2.jpg" alt=""></a>
<a href="javascript:;" i="img/3d.jpg" class="Slide Two"><img src="img/3.jpg" alt=""></a>
<a href="javascript:;" i="img/4d.png" class="Slide Two"><img src="img/4.png" alt=""></a>
<a href="javascript:;" i="img/5d.jpg" class="Slide Two"><img src="img/5.jpg" alt=""></a>
<script type="text/javascript">
    $('.One').simpleSlide();
</script>

演示实例2

<a href="javascript:;" i="img/1d.jpg" class="Slide Two"><img src="img/1.jpg" alt=""></a>
<a href="javascript:;" i="img/2d.jpg" class="Slide Two"><img src="img/2.jpg" alt=""></a>
<a href="javascript:;" i="img/3d.jpg" class="Slide Two"><img src="img/3.jpg" alt=""></a>
<a href="javascript:;" i="img/4d.png" class="Slide Two"><img src="img/4.png" alt=""></a>
<a href="javascript:;" i="img/5d.jpg" class="Slide Two "><img src="img/5.jpg" alt=""></a>
<script type="text/javascript">
    $('.Two').simpleSlide({
        "opacity":0.5,                  //背景透明度
        "windowAction": "zoomIn",       //窗体进入动画
        "imageAction": "bounceIn",      //图片进入动画
        "loadingImage":"img/1.gif"      //加载图片
    });
    //动画样式请参考  animate.css
</script>