jquery图片折叠幻灯片特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片折叠幻灯片特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片折叠幻灯片</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container">
    		<h1><strong>Lof Cordion 1.0</strong> -  Mootool 1.1</h1>
            <p>
                <strong> Direction</strong> 
             
            </p>       
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lof-cordion-1" class="lof-cordion">
	<div class="lof-cordion-wapper">
    	<ul>

        	<li>
            	<div class="lof-shadow"></div>
            	<img src="images/content_pic1.jpg" />
                 <div class="lof-description">
                	<h4>News Flash 1</h4>
                    <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,</p>
                </div>
           </li>

            <li>
            	<div class="lof-shadow"></div>
                <img src="images/content_pic2.jpg" />
                <div class="lof-description">
                	<h4>News Flash 2</h4>
                    <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,</p>
                </div>
      </li>

            <li>
            	<div class="lof-shadow"></div>
                <img src="images/content_pic3.jpg" />
                 <div class="lof-description">
                	<h4>News Flash 3</h4>
                    <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,</p>
                </div>
                </li>

            <li><div class="lof-shadow"></div><img src="images/content_pic4.jpg" />
             	<div class="lof-description">
                	<h4>News Flash 4</h4>
                    <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,</p>
                </div>
            </li>
        </ul>
	</div>

    <div class="lof-bottom"></div>
 </div>   

<!------------------------------------- END OF THE CONTENT ------------------------------------------------->
<script type="text/javascript">
	new LofmCordion( {wapperSelector: $E('#lof-cordion-1 .lof-cordion-wapper') } );
</script>
</div>
</body>
</html>

JS代码(script.js):

/** * @version$Id:$Revision * @packagemootool * @subpackagelofmCordion. * @copyrightCopyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved. * @website http://landofcoder.com * @licenseThis plugin is dual-licensed under the GNU General Public License and the MIT License */
 ////if( typeof(LofmCordion) == 'undefined' ){
	var LofmCordion = new Class({
	initialize:function( options ){
	this.setting = Object.extend({
	wapperSelector:$E('#lof-cordion-1 .lof-cordion-wapper'),startItem:3,isAuto:true,align:'center',eventHanlder:'click',// hover|clickisPreload:true,widthDisplaying:70,maxWidth:700,minWidth:70,maxItem:4}
,options ||{
}
);
	this.lastNo = 0;
	var mapEvents ={
	hover:['mouseover'],click:['click']}
;
	this.panelPositioning = 1;
	this.fx = [];
	this.fxShadowItems = [];
	this.fxDescriptions = [];
	if( !$defined(this.setting.wapperSelector) ){
	return;
}
this.sliders = $(this.setting.wapperSelector).getElements('ul li');
	if( this.sliders.length <= 0 ){
	return}
this.sliders.each( function(item,index){
	var seft = this;
	item.addEvent( mapEvents[this.setting.eventHanlder][0],function(e){
	e = new Event(e);
	this.makeAnimation( index );
	e.stop();
}
.bind(this) );
	item.setStyles({
	display:'block','z-index':index+1,'left':index*(this.setting.widthDisplaying)}
);
	this.fx[index] = new Fx.Styles( item,{
	duration:500,transition:Fx.Transitions.Circ.easeInOut}
);
	this.fxShadowItems[index] = new Fx.Styles( item.getElement( '.lof-shadow' ),{
	duration:500,transition:Fx.Transitions.Circ.easeInOut}
);
	this.fxDescriptions[index] = new Fx.Styles( item.getElement( '.lof-description' ),{
	duration:700,transition:Fx.Transitions.linear}
).start({
	height:[0,0]}
);
}
.bind(this) );
	/// preload iamges$image = this.setting.wapperSelector.getElements('img');
	$image.setStyles({
	opacity:0,visibility:'hidden'}
);
	$image.each( function( image,index ){
	//if( image.complete ){
	setTimeout( function(){
	var fx = new Fx.Style( image,'opacity',{
	duration:1000}
);
	fx.start(0,1);
}
,500 + 100*index )//}
else{
	//}
}
);
	///this.fxShadowItems[this.setting.startItem].start({
	opacity:0}
);
	this.fxDescriptions[this.setting.startItem].stop().start({
	height:[90]}
);
}
,animateDescription:function(){
}
,makeAnimation:function( activeIndex ){
	///alert(activeIndex)//this.fxShadowItems.start();
	this.fx.each( function(fx,currentIndex){
	var panelLeft = this.setting.minWidth * currentIndex;
	if ( (currentIndex * this.panelPositioning) > ( activeIndex * this.panelPositioning)){
	panelLeft = panelLeft + (this.setting.maxWidth - this.setting.minWidth) * this.panelPositioning;
}
fx.start({
	left:[panelLeft]}
);
	if( activeIndex != currentIndex ){
	this.fxDescriptions[currentIndex].start({
	height:0}
)this.fxShadowItems[currentIndex].start({
	opacity:1}
);
}
}
.bind(this) );
	this.fxShadowItems[activeIndex].start({
	opacity:0}
);
	this.lastNo = activeIndex;
	this.fxDescriptions[activeIndex].start({
	height:90}
);
}
}
);
}

CSS代码(layout.css):

body{margin:0px;font-family:Arial,Helvetica,sans-serif;background:#000000;}
#container{width:900px;margin:0px auto 0px;background:#FFFFFF;padding:10px;font-size:12px;margin-top:50px;}
a{text-transform:none;color:#333}
#footer{background:#F0F0F0;padding:10px;border:#999 dotted 1px;}

CSS代码(style.css):

.lof-cordion{position:relative;clear:both;overflow:hidden;}
.lof-cordion-wapper{clear:both;width:820px;height:300px;}
.lof-cordion-wapper ul{width:100%;position:relative;}
.lof-cordion-wapper ul li{list-style-type:none !important;float:left !important;display:block;height:300px;overflow:hidden;position:absolute;top:0;cursor:hand;cursor:pointer;background:url(../images/loading.gif) no-repeat 50% 50%}
.lof-shadow{background:url(../images/shadow-left.png) repeat-y;z-index:0;width:50px;height:320px;position:absolute;left:0;top:0;}
.lof-bottom{background:url(../images/shadow-bottom.jpg) no-repeat;height:115px;top:-64px;position:relative}
.lof-description{height:90px;width:100%;position:absolute;bottom:0;left:0;}
.lof-description{background:url(../images/bg-desc.png);padding:0 20px;color:#FFF}

附件:下载该文件资源,减少时间成本(增值服务)