欢迎光临一流素材网,免积分免费素材下载!
AD

清新幻灯片插件-AVIASLIDER

所属栏目:轮播图/幻灯片更新时间:2016-10-17原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

兼容:Firefox,Chrome,Safari,IE10+,IE9,IE8

AviaSlider是一款简洁清新的幻灯片插件,有8种切换特效可供我们选择,当我们点击某张幻灯片的时候还会弹出框来显示该大图。自行配置参数来创建我们自己的特效。包含了预加载的图片。自动播放并且在用户交互后停止。其中包含了html5和css3的内容。几乎支持所有浏览器。


使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<link rel="stylesheet" href="prettyPhoto.css" type="text/css"media="screen">  
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.aviaSlider.min.js"></script>
<script type="text/javascript" src="custom.min.js"></script>

2、在body标签中加入以下格式的html代码

<div class="center">
     
    <ul class="aviaslider" id="droping-curtain">
         
        <li>
            <a href="1.jpg" title=""><img src="1.jpg" alt=""></a>
        </li>
 
        <li>
            <a href="2.jpg" title=""><img src="2.jpg" alt="A heading of your choice :: This is the image description defined in your alt tag"></a>
        </li>
 
        <li>
            <a href="5.jpg" title=""><img src="3.jpg" alt="Another heading :: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor"></a>
        </li>
 
        <li>
            <a href="4.jpg" title=""><img src="4.jpg" alt="No Heading, just a line of content"></a>
        </li>
 
        <li>
            <a href="5.jpg" title=""><img src="5.jpg" alt=""></a>
        </li>
 
    </ul>
 
</div>

注意:该插件的调用是 写在 custom.min.js 中的,大家可以看看你面的东西
参数配置
暂时未找到参数文档,大家有找到的可以发布在这里
jquery.aviaSlider.min.js 文件找到了相关的参数部分,见下

 var defaults = {
    slides: 'li',
    animationSpeed: 900,
    autorotation: true,
    autorotationSpeed: 3,
    appendControlls: '',
    slideControlls: 'items',
    blockSize: {
        height: 'full',
        width: 'full'    },
    betweenBlockDelay: 60,
    display: 'topleft',
    switchMovement: false,
    showText: true,
    transition: 'fade',
    backgroundOpacity: 0.8,
    transitionOrder: ['diagonaltop', 'diagonalbottom', 'topleft', 'bottomright', 'random']
};

在这儿我就不对每个参数做解析了,大家可以自行测试里面的某个参数,根据自己的需要来修改。
切换模板
模板切换其实比较简单,只需要将以下代码

其中的 id 名改成以下值中的一个即可
diagonal-blocks
winding-blocks
randomized-blocks
droping-curtain
fading_curtain
fading-top-curtain
fullwidth-fade-slider

direction-fade-slider


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件