金山快盘网站jQuery焦点图轮播滚动切换特效代码

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

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

以下是金山快盘网站jQuery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>金山快盘网站jQuery焦点图</title>
<meta content="zh-CN" http-equiv="content-language" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css?v=130906" />
<link rel="stylesheet" type="text/css" href="css/index.css?v=130906" />
</head>
<body>
<!--Content-->
<div id="main">
	<div id="top-main">
		<div class="mid w960 clearfix pr">
			<ul class="left-banner">
				<li>
				<a title="点击查看" target="_blank" href="#">
				<img src="images/058.png" /></a></li>
				<li style="left:-1560px">
				<a title="点击查看" target="_blank" href="#">
				<img src="images/023.png" /></a></li>
				</li>
				<li style="left:-1560px">
				<img src="images/004.png" /></li>
				<li style="left:-1560px">
				<img src="images/002.png" /></li>
			</ul>
			<ul class="controller">
				<li data-ca="main-slide1" class="current"></li>
				<li data-ca="main-slide2"></li>
				<li data-ca="main-slide3"></li>
				<li data-ca="main-slide4"></li>
			</ul>

		</div>
	</div>
</div>
<!--Js-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script>
//首页轮播动画
;(function($){
	$.fn.fadeAnimate = function(options){
		options = $.extend({
			liDomList: $(this).find('li'),
			liDomListLen: $(this).find('li').length,
			disableAutoEle: $('#account-box'),
			curIndex: 0,
			nextIndex: 1,
			curDom:undefined,
			nextDom:undefined,
			curLeft:0,
			minLeft:-1470,
			fadeLock: false,
			fadeTime: 5000,
			imgWidth: 1470,
			controller: $('#top-main .controller'),
			controllerList: $('#top-main .controller li'),
			timer: undefined,
			accSpeed: 4,
			Cx: 0.02, //阻力系数
			minRes: 1, //最小阻力
			curSpeed: 0
		}, options);		

		//移动到
		function changeTo(index){
			if(true == options.fadeLock){return;}
			window.clearTimeout(options.timer);
			options.nextIndex = index;
			options.fadeLock = true;

			//初始化
			options.curDom = options.liDomList.eq(options.curIndex);
			options.nextDom = options.liDomList.eq(options.nextIndex);
			options.nextDom.css('opacity',0);
			options.curLeft = 0;
			options.curSpeed = 0;
			options.nextDom.css('left', options.curLeft + options.imgWidth);
			controlChange(options.nextIndex);

			move();
		}

		//动画
		function move(){
			var nextLeft = getNextLeft();
			var opacity = Math.abs(nextLeft/options.imgWidth);
			var opacityPer = parseInt(opacity * 100);
			options.curDom.css({'left': nextLeft, 'opacity': 1-opacity, 'filter': 'alpha(opacity=' + (100 - opacityPer) + ')'});

			options.nextDom.css({'left': nextLeft + options.imgWidth, 'opacity': opacity, 'filter': 'alpha(opacity=' + opacityPer + ')'});
			if(nextLeft <= options.minLeft){
				options.curIndex = options.nextIndex;
				options.fadeLock = false;
				autoFade();
			}else{
				window.setTimeout(move, 20);	
			}
		}

		//获取下次速度
		function getNextSpeed(){
			var incSpeed = options.accSpeed - options.minRes - options.curSpeed * options.Cx; 
			return options.curSpeed += incSpeed;
		}

		//获取下次便宜left
		function getNextLeft() {
			var nextSpeed = getNextSpeed();
			options.curLeft = options.curLeft - nextSpeed < options.minLeft ? options.minLeft : options.curLeft - nextSpeed;
			return options.curLeft;
		}

		//获取下个索引
		function changeNext() {
			var nextIndex = options.curIndex + 1 >= options.liDomListLen ? 0 : options.curIndex + 1; 	
			changeTo(nextIndex);
		}	

		//轮播图按钮点击效果
		options.controller.delegate('li', 'click', function(e){
			var index = $(e.currentTarget).index();
			changeTo(index);
		});


		//手动控制
		function controlChange(index) {
			options.controllerList.eq(index).addClass('current').siblings('.current').removeClass('current');
		}

		//自动轮播
		function autoFade() {
			window.clearTimeout(options.timer);	
			options.timer = window.setTimeout(changeNext, options.fadeTime);	
		}

		autoFade();

		/*
		options.disableAutoEle.focusin(function(){
			window.clearTimeout(options.timer);	
		}).focusout(function(){
			autoFade();
		})
		*/
		
		$(this).mouseenter(function(){
			window.clearTimeout(options.timer);	
		}).mouseleave(function(){
			autoFade();
		});

		return $(this);
	}	
})(jQuery);
$('#top-main .left-banner').fadeAnimate({});
</script>
</body>
</html>

CSS代码(index.css):

/* CSS Reset */
body,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd,form{margin:0px;padding:0px;}
li,dt,dd{list-style:none;}
.mid{width:750px;margin:0 auto;}
#main{_zoom:1;font-family:"微软雅黑";}
#top-main{position:relative;overflow:hidden;height:560px;border-bottom:1px solid #E5E5E5;background:url('img/top_banner_bg.png') repeat-x;}
#top-main .orange-btn{font-family:"微软雅黑";display:inline-block;width:100%;height:45px;line-height:45px;text-align:center;font-size:18px;color:#fff;background:url('img/btn_bg_1.jpg') repeat-x;}
#top-main .orange-btn:hover{background-position:0 -45px;}
#top-main .left-banner{*overflow:hidden;}
#top-main .left-banner li{position:absolute;width:600px;height:500px;left:0;top:0;padding-top:15px;}
#top-main .left-banner li img{width:640px;margin-left:-40px;height:500px;}
#top-main .controller{position:absolute;width:120px;height:20px;top:520px;left:290px;}
#top-main .controller li{cursor:pointer;background:#abc;float:left;width:22px;height:20px;background:url('img/dot.png') 4px 0 no-repeat;_background:url('img/dot_8.png') 4px 0 no-repeat;}
#top-main .controller li.current{background-position:5px -20px;}
#top-main .controller li:hover{position:relative;top:1px;}
#top-main .right-account{float:right;position:relative;}
#top-main .right-user{float:right;position:relative;margin-top:30px;}
#bdshare .bds_more{color:#999;}
.mb28{margin-bottom:28px;}
.pr{position:relative;}
.vt{vertical-align:top;}
.mb20{margin-bottom:20px;}

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