最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

IMGDEMO带标题并自动播放的手风琴效果

来源:http://www.erdangjiade.com/ 沐浴春风 2016-02-11 18:14浏览(1521)

本demo中的手风琴效果是最常用的,带触发事件、标题、自动播放、而且还带透明度效果。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

IMGDEMO带标题并自动播放的手风琴效果
分类:图片代码 > 手风琴 难易:入门级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

图片和标题html代码

<ul id="demo">
    <li>
        <img src="images/1.jpg" width="490"  height="319" />
        <div><a href="http://www.erdangjiade.com/js/734.html">PHP+jQuery+Flash制作捞宝箱效果</a></div>
    </li>
    <li>
        <img src="images/2.jpg" width="490"  height="319" />
        <div><a href="http://www.erdangjiade.com/js/735.html">PHP+jQuery+Flash老虎机抽奖演示下载</a></div>
    </li>
    <li>
        <img src="images/3.jpg" width="490"  height="319" />
        <div><a href="http://www.erdangjiade.com/js/736.html">layer演示5种通用的手机弹出层</a></div>
    </li>
    <li>
        <img src="images/4.jpg" width="490"  height="319" />
        <div><a href="http://www.erdangjiade.com/js/737.html">fullscreenForm问卷调查进度表单插件</a></div>
    </li>
    <li>
        <img src="images/5.jpg" width="490"  height="319" />
        <div><a href="http://www.erdangjiade.com/js/738.html">13种不同的页面Loading演示DEMO</a></div>
    </li>
</ul>

引入手风琴插件imgdemo.js

<script type="text/javascript" src="imgdemo.js"></script>
$(document).ready(function(e) {
    var opt = {
        "speed": "slow", //变换速度,三速度可选 slow,normal,fast;
        "by": "click", //触发事件,click或者mouseover;
        "auto": true, //是否自动播放;
        "sec": 3000	 		//自动播放间隔;
    };
    $("#demo").IMGDEMO(opt);
});

imgdemo手风琴相关API

参数 描述 默认值
speed 变换速度,三速度可选 slow,normal,fast; slow
by 触发事件,click或者mouseover click
auto 是否自动播放 true
sec 自动播放间隔 3000
index 轮播开始索引号 1
maxWidth 最大宽度 最后一张图片宽度
minWidth 最小宽度 第一张图片宽度
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/757.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2