jquery带播放器按钮焦点图轮播滚动切换特效代码

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

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

以下是 jquery带播放器按钮焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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" />
<title>jquery带播放器按钮焦点图</title>
<link rel=stylesheet type=text/css href="css/style.css" media=all>
<script type=text/javascript src="js/jquery-1.7.2.min.js"></script>
<script type=text/javascript src="js/jquery.cycle.all-2.9999.3.min.js"></script>
<script type=text/javascript src="js/jquery.easing-1.3.js"></script>
<script type=text/javascript>
/*<![CDATA[*/
<!-- 
/*2193c2ad2e56cf51ea5657f03b37e692*/
jQuery(document).ready(function() {
	play_class = 'play';
	jQuery('#imagecycle_c5').after('<div class="imagecycle-controller" id="imagecycle_c5_controller"><ul><li class="first"><a id="imagecycle_c5_first"></a></li><li class="prev"><a id="imagecycle_c5_prev"></a></li><li class="pause"><a id="imagecycle_c5_pause"></a></li><li class="next"><a id="imagecycle_c5_next"></a></li><li class="last"><a id="imagecycle_c5_last"></a></li></ul></div>');
	jQuery('#imagecycle_c5_pause').click(function() {
		_parent = jQuery(this).parent();
		if(_parent.hasClass(play_class)) {
			_parent.removeClass(play_class);
			jQuery('#imagecycle_c5').cycle('resume');
		} else {
			_parent.addClass(play_class);
			jQuery('#imagecycle_c5').cycle('pause');
		}
	});
	jQuery('#imagecycle_c5_first').click(function() {
		jQuery('#imagecycle_c5').cycle(0);
	});
	jQuery('#imagecycle_c5_last').click(function() {
		options = jQuery('#imagecycle_c5').data('cycle.opts');
		jQuery('#imagecycle_c5').cycle(options.elements.length - 1);
	});
	
	jQuery('#imagecycle_c5').show().cycle({
		fx: 'cover,curtainY',
		easing: 'easeInOutBack',
		sync: true,
		random: false,
		cleartypeNoBg: false,
		before: function(a,n,o,f) {jQuery('div', this).css('display', 'none');},
		after: function(a,n,o,f) {jQuery('div', this).animate({opacity: 'show'},200,'swing');},
		next: '#imagecycle_c5_next',
		prev: '#imagecycle_c5_prev'
		
	});
	
	
	jQuery('#imagecycle_c5').parent().css('width', jQuery('#imagecycle_c5').css('width'));
	
	
	jQuery('#imagecycle_c5').parent().hover(function(){
		jQuery('#imagecycle_c5_controller').stop(true,true).fadeIn('fast');
	}, function(){
		jQuery('#imagecycle_c5_controller').stop(true,true).fadeOut('fast');
	});
	jQuery('div', jQuery('#imagecycle_c5')).show();
});

// -->
/*]]>*/
</script>

</head>
<body>
<!-- 代码 开始 -->
<div class=tx-imagecycle-pi1>
    <ul id=imagecycle_c5 class=tx-imagecycle-pi1-images>
          <li>
                  <a href="#" target=_blank>
                  <img border=0 src="images/0a5edd737b.jpg" width=700 height=240>
                  </a>
                  <div class=imagecycle-caption>免费午餐爱心商家招募中</div>
          <li>
                  <a href="#" target=_blank>
                  <img border=0 src="images/6dbc9131d2.png" width=700 height=240>
                  </a>
                  <div class=imagecycle-caption>“免费午餐”在2011中国慈善年会上获“中国慈善推动者”奖</div>
          </li>
    </ul>
</div>
<noscript>
      <ul class=tx-imagecycle-pi1-images>
              <li>
              <a href="#" target=_blank>
              <img src="images/0a5edd737b.jpg" width=700 height=240>
              </a>
              <div class=imagecycle-caption>免费午餐爱心商家招募中</div>
              </li>
      </ul>
</noscript>
</body>
</html>

JS代码(jquery.easing-1.3.js):

/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.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;
}
}
);
	/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */

CSS代码(stylesheet_2d2a0a9928.css):

/*图片位置*/
.tx-imagecycle-pi1-images{POSITION:relative;PADDING-BOTTOM:0px;LIST-STYLE-TYPE:none;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;DISPLAY:none;OVERFLOW:hidden;PADDING-TOP:0px}
/*图片位置*/
/*按钮位置*/
.tx-imagecycle-pi1-images .imagecycle-caption{POSITION:absolute;PADDING-BOTTOM:5px;PADDING-LEFT:5px;WIDTH:100%;BOTTOM:0px;PADDING-RIGHT:5px;DISPLAY:none;WHITE-SPACE:nowrap;BACKGROUND:#000;COLOR:#fff;PADDING-TOP:5px;LEFT:0px;opacity:0.8}
/*按钮位置*/

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