图片高度不固定的焦点图代码轮播滚动切换特效

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

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

以下是图片高度不固定的焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为图片高度不固定的焦点图代码" />
<title>图片高度不固定的焦点图代码</title>
<!-- Required CSS -->
<link href="css/movingboxes.css" rel="stylesheet">
<!--[if lt IE 9]>
<link href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
<![endif]-->
<link href="css/lrtk.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.movingboxes.js"></script>
<base target="_blank">
</head>

<body>
<!-- 代码 开始 -->
	<div id="wrapper">
		<!-- MovingBoxes Slider -->
		<ul id="slider">

			<li>
				<img src="images/1.jpg" alt="picture">
				<h2>News Heading</h2>
				<p>Add a short exerpt here... <a href="#">more</a></p>
			</li>

			<li>
				<img src="images/2.jpg" alt="picture">
				<h2>News Heading</h2>
				<p>Add a short exerpt here... <a href="#">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
			</li>

			<li>
				<img src="images/3.jpg" alt="picture">
				<h2>News Heading</h2>
				<p>Add a short exerpt here... <a href="#">more</a></p>
			</li>

			<li>
				<img src="images/4.jpg" alt="picture">
				<h2>News Heading</h2>
				<p>Add a short exerpt here... <a href="#">more</a></p>
			</li>

			<li>
				<img src="images/5.jpg" alt="picture">
				<h2>News Heading</h2>
				<p>Add a short exerpt here... <a href="#">more</a></p>
			</li>

			<li>
				<img src="images/6.jpg" alt="picture">
				<h2>News Heading</h2>
				<p>Add a short exerpt here... <a href="#">more</a></p>
			</li>

		</ul><!-- end Slider #1 -->

	</div><!-- end wrapper -->
	<script>
	$(function(){

		$('#slider').movingBoxes({
			/* width and panelWidth options deprecated, but still work to keep the plugin backwards compatible
			width: 500,
			panelWidth: 0.5,
			*/
			startPanel   : 1,      // start with this panel
			wrap         : false,  // if true, the panel will infinitely loop
			buildNav     : true,   // if true, navigation links will be added
			navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
		});

	});
	</script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(jquery.easing.1.2.js):

/* * jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php * * Uses the built In easIng capabilities added In jQuery 1.1 * to offer multiple easIng options * * Copyright (c) 2007 George Smith * Licensed under the MIT License:* http://www.opensource.org/licenses/mit-license.php */
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.extend( jQuery.easing,{
	easeInQuad:function (x,t,b,c,d){
	return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
	return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
	return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t + b;
	return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
	return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
	return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
	return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
	return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
	return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d/2)==2) return b+c;
	if (!p) p=d*(.3*1.5);
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
	return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
	if ((t/=d) < (1/2.75)){
	return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
	if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
	return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);

CSS代码(lrtk.css):

*{margin:0;padding:0;}
body{font:16px/1.4 'PT Sans',sans-serif;}
.demo-title{text-align:center;color:#a71700;text-transform:uppercase;padding:30px 0 0;font-size:60px;}
/* Navigation bar */
.main-nav{display:block;text-align:center;border-bottom:2px solid #a71700;margin:0 0 20px 0;padding:0 0 10px 0;}
.main-nav a{text-decoration:none;color:#3e63ec;font-size:18px;margin:0 8px;}
.main-nav a:hover{color:black;border-bottom:2px solid black;}
/* Moving Boxes title image wrapper */
#title{text-align:center;}
#title img{border:0;}
/* Panel images */
.mb-inside img{width:100%;}
/* height of the placeholder until image completely loads - needed for webkit browsers,add this only if you don't want the height animation on startup. 326px measures the height of the current image when enlarged*/
#slider-two .current img{/* height:326px;*/
}
/* Panel links */
.mb-inside a{color:#333;text-decoration:none;border-bottom:1px dotted #ccc;}
.mb-inside a:hover{border-bottom:1px solid #999;}
/* Add/remove panels buttons */
.buttons{padding:5px 10px;text-align:center;}
/* Direct link styling */
.dlinks{text-align:center;margin:0 0 20px 0;}
.dlinks *{vertical-align:middle;}
#slider{width:500px;}
#slider li{width:250px;}

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