注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

可无限循环的jquery手风琴幻灯片特效

jQuery插件 fishcity 977浏览

可无限循环的jquery手风琴幻灯片特效插件,具有动感的标题展示方式,推荐指数4星。下来我们来使用:

1、引入相关核心文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

2、写入Html代码,结构简单,相信懂html的朋友一看就知道是怎么回事了。

<div id="wrapper">
   <div id="carousel">
    <div><img src="img/sp-colorado-is-not-enough.jpg" alt="Colorado" width="700" height="525" /></div>
    <div><img src="img/sp-die-hard.jpg" alt="Die Hard" width="700" height="525" /></div>
    <div><img src="img/sp-fat-red-line.jpg" alt="Fat Red Line" width="700" height="525" /></div>
    <div><img src="img/sp-resevoir-dogs.jpg" alt="Resevoir Dogs" width="700" height="525" /></div>
    <div><img src="img/sp-fatrix.jpg" alt="The Fatrix" width="700" height="525" /></div> 
  </div>
</div>
<div id="donate-spacer"></div>

3、CSS代码,不是很多,代码内没有特别的需要解析的属性值,容易看懂,这里就不一一注释了。

#wrapper {
	width: 900px;
	height: 525px;
	margin: -262px 0 0 -450px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
}
 
#carousel div {
	cursor: pointer;
	margin-right: -650px;
	float: left;
	position: relative;
	box-shadow: 0 0 10px #000;
}
 
#carousel div: last-child {
	cursor: default;
}
 
#carousel div span {
	background-color: #222;
	background-color: rgba(0,0,0, 0.8);
	color: #fff;
	font-size: 25px;
	text-align: center;
	display: inline-block;
	width: 700px;
	height: 25px;
	padding: 20px 0;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: 0;
}
 
#donate-spacer {
	height: 100%;
}
 
#donate {
	border-top: 1px solid #999;
	width: 750px;
	padding: 50px 75px;
	margin: 0 auto;
	overflow: hidden;
}
 
#donate p, #donate form {
	margin: 0;
	float: left;
}
 
#donate p {
	width: 650px;
}
 
#donate form {
	width: 100px;
}

4、JS部分,代码加了详细注释,要再不懂的话,建议先学下JS基础吧!

$(function() {
    $('#carousel').carouFredSel({
        width: 900,                //展示框的宽度
        height: 525,                //展示框的宽度
        align: false,
        padding: [0, 650, 0, 0],    //右边的padding
        items: {
            width: 50,                //另外图片左边留出可见的宽度
            height: 525,               //图片可见的高度
            visible: 5,                //同时可以图片数量
            minimum: 1                //   最小记数
        },
        scroll: {
            items: 1,        
            duration: 750,   //滚动持续时间,
            onBefore: function(data) {
                data.items.old.add(data.items.visible).find('span').stop().slideUp();
            },
            onAfter: function(data) {
                data.items.visible.last().find('span').stop().slideDown();
            }
        },
        auto: false,
        onCreate: function() {  //实现循环
            $(this).children().each(function() {
                $(this).append('' + $('img', this).attr('alt') + '');
                $(this).find('span').hide();
            });
        }
 
    });
 
    $('#carousel').children().click(function() {        //绑定单击事件 
        $('#carousel').trigger('slideTo', [this, -4, 'prev']);
 
    });
 
});

这样,就把插件使用了,简单轻松吧。好了,讲解就到这完成了,感觉您对jQ酷的关注与技持!

转载请注明:jQ酷 » 可无限循环的jquery手风琴幻灯片特效

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。