经验分享程序开发文档资料数据资源其它资源

可暂停自动播放jQuery焦点图轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 可暂停自动播放jQuery焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

可暂停自动播放jQuery焦点图轮播滚动切换特效代码

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" />
<title>可暂停自动播放jQuery焦点图</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery.1.7.1.js"></script>
<script src="js/jquery.jcarousellite.js"  type="text/javascript" ></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript">
 $(document).ready( function(){						 
		var buttons = { previous:$('#jslidernews1 .button-previous') ,
						next:$('#jslidernews1 .button-next') };
		 $obj = $('#jslidernews1').lofJSidernews( { interval : 8000,
											 	easing			: 'easeInOutQuad',
												duration		: 1200,
												auto		 	: true,
												maxItemDisplay  : 3,
												startItem:0,
												navPosition     : 'horizontal', 
												navigatorHeight : null,
												navigatorWidth  : null,
												mainWidth:638,
												buttons:buttons} );
	});
</script>

</head>

<body>

<div id="jslidernews1" class="lof-slidecontent">
<div class="preload"><div></div></div>
<div  class="button-previous">上一个</div>
<div  class="button-next">下一个</div>
<!-- MAIN CONTENT --> 
<div class="main-slider-content">
<ul class="sliders-wrap-inner">
<li><a href="#" target="_blank"><img src="images/1636967813394.jpg" title="12.9-12.15本周新人优秀模特推荐" /></a></li>

<li><a href="#" target="_blank"><img src="images/765787183344.jpg" title="苏雪儿" /></a></li>

<li><a href="#" target="_blank"><img src="images/1619554683751.jpg" title="Colin" /></a></li>

<li><a href="#" target="_blank"><img src="images/3355627347793.jpg" title="邓晓梅" /></a></li>

<li><a href="#" target="_blank"><img src="images/4417870791139.jpg" title="梦想8090" /></a></li>

<li><a href="#" target="_blank"><img src="images/7060495233673.jpg" title="冠军" /></a></li>

</ul>  	
</div>
<div class="navigator-content">
<div class="button-control"><span></span></div>	
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>         		
</ul>
</div>
</div> 
</div>
</body>
</html>

JS代码(jquery.easing.js):

jQuery.easing['jswing'] = jQuery.easing['swing'];
	jQuery.extend( jQuery.easing,{
	def:'easeOutQuad',swing:function (x,t,b,c,d){
	//alert(jQuery.easing.default);
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,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代码(zzsc.css):

body{font-family:Arial,宋体,"Microsoft Yahei";font-size:12px;color:#666;-webkit-text-size-adjust:none}
*{margin:0px;padding:0px;list-style:none;border:0;}
.lof-slidecontent{width:638px;height:320px;position:relative;overflow:hidden;border:#666 solid 5px;margin:0 auto;}
.main-slider-content{width:980px;height:340px;}
.lof-slidecontent .preload{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100000;text-align:center;background:#FFF}
.lof-slidecontent .preload div{height:100%;width:100%;background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}
.lof-slidecontent .sliders-wrapper{position:relative;height:100%;width:900px;z-index:3px;overflow:hidden;}
.lof-slidecontent ul.sliders-wrap-inner{overflow:hidden;background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;padding:0px;margin:0;position:absolute;overflow:hidden;}
.lof-slidecontent ul.sliders-wrap-inner li{overflow:hidden;padding:0px;margin:0px;float:left;position:relative;}
.lof-slidecontent .lof-opacity li{position:absolute;top:0;left:0;float:inherit;}
.lof-slidecontent .navigator-content{position:absolute;background:none repeat scroll 0 0 #000000;border-radius:5px 5px 5px 5px;bottom:10px;padding:5px 15px;position:absolute;right:10px;}
.lof-slidecontent .navigator-wrapper{position:relative;z-index:10;height:180px;width:310px;overflow:hidden;color:#FFF;float:left}
.lof-slidecontent ul.navigator-wrap-inner{top:0;padding:0;margin:0;position:absolute;width:100%;}
.lof-slidecontent ul.navigator-wrap-inner li{cursor:hand;cursor:pointer;list-style:none;padding:0;margin-left:0px;overflow:hidden;float:left;display:block;text-align:center;}
/*******************************************************/
ul.sliders-wrap-inner li img{padding:0px;}
.lof-slidecontent .slider-description a.readmore{color:#58B1EA;font-size:95%;}
.lof-slidecontent .slider-description a{color:#FFF;}
.lof-slidecontent .slider-description{z-index:100px;position:absolute;bottom:50px;left:0px;width:350px;background:url(../images/bg_trans.png);height:100px;padding:10px;color:#FFF;}
.lof-slidecontent .slider-description h4{font-size:14px;margin:10px 0;padding:0;}
.lof-slidecontent .slider-description .slider-meta a{margin:0;background:#C01F25;font-size:75%;padding:2px 3px;font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;text-transform:uppercase;text-decoration:none}
.lof-slidecontent .item-meta a:hover{text-decoration:underline;}
.lof-slidecontent .item-meta i{font-size:70%;}
.navigator-wrapper{color:#FFFFFF;float:left;height:180px;overflow:hidden;position:relative;width:310px;z-index:100;}
.navigator-wrap-inner{top:0;padding:0;margin:0;position:absolute;width:100%;}
.lof-slidecontent ul.navigator-wrap-inner li{cursor:hand;cursor:pointer;list-style:none;padding:0;margin-left:0px;overflow:hidden;float:left;display:block;text-align:center;}
.lof-slidecontent ul.navigator-wrap-inner li span{display:block;padding:10px;position:relative;line-height:0.5em}
.lof-slidecontent ul.navigator-wrap-inner li.active,.lof-slidecontent ul.navigator-wrap-inner li:hover{background:#FFF;color:#000;display:block;-moz-transition:background-color 0.8s}
.lof-slidecontent .button-next,.lof-slidecontent .button-previous{display:block;width:20px;color:#FFF;cursor:pointer;position:absolute;height:100%;z-index:40;top:0;text-indent:-999px;}
.lof-slidecontent .button-next{right:0px;background:url(../images/next.gif) no-repeat right center;}
.lof-slidecontent .button-previous{left:0px;background:url(../images/previous.gif) no-repeat left center;}
.lof-slidecontent .button-control{float:left;height:27px;width:30px;cursor:pointer}
.lof-slidecontent .action-start{background:url(../images/play.png) no-repeat center center #FFF;}
.lof-slidecontent .action-stop{background:url(../images/pause.png) no-repeat center center #FFF;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
480.15 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
480.15 KB
立即下载
路静枫
了解
打赏作者 鼓励作者
Html 焦点滚动特效2
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章