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/styles.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.focus.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#j_Focus").Focus();
});
</script>
</head>
<body id="introduction">
<div id="page">
	<div id="container" class="content clearfix">
		<div class="focusWrap">
			<div class="focusCon" id="j_Focus">
			<div class="focusL">
				<ul class="ulFocus" id="j_FocusNav">
					<li rel="0">
						<span>酷狗7正式版发布<br/>音乐魔力全线绽放</span>
					</li>

					<li rel="1">
						<span>海量免费高清MV<br/>更清晰更流畅</span>
					</li>
					<li rel="2">
						<span>酷狗7:音乐魔方<br/>带给你全新播放体验</span>
					</li>
					<li rel="3">

						<span>个性化歌曲推荐<br/>酷狗猜你喜欢</span>
					</li>
					<li rel="4">
						<span>酷狗收音机<br/>重新认识电台魅力</span>
					</li>
					<li rel="5">
						<span>手机酷狗3.0<br/>无线音乐新序章</span>

					</li>
				</ul>
				<div class="back" id="j_FocusBack"></div>
			</div>
			<div class="focusM">
				<ul class="ulFCon" id="j_FocusCon">
					<li>
						<a href="#" target="_blank">
							<img src="images/1.jpg" alt="酷狗7正式版发布" />

						</a>
					</li>
					<li>
						<a href="#" target="_blank">
							<img src="images/2.jpg" alt="海量免费高清MV" />
						</a>
					</li>
					<li>
						<a href="#" target="_blank">
							<img src="images/3.jpg" alt="酷狗7:音乐魔方" />
						</a>
					</li>
					<li>
						<a href="#" target="_blank">
							<img src="images/4.jpg" alt="个性化歌曲推荐" />
						</a>
					</li>
					<li>

						<a href="#" target="_blank">
							<img src="images/5.jpg" alt="酷狗收音机" />
						</a>
					</li>
					<li>
						<a href="#" target="_blank">
							<img src="images/6.jpg" alt="手机酷狗3.0" />
						</a>
					</li>

				</ul>
			</div>
			</div>
			<div class="focusR">
				<div class="kugoo">
					<a title="马上下载酷狗7" href="#" target="_blank">马上下载酷狗7</a>
				</div>
				<ul class="ulHot">

	 				<li><a href="#" target="_blank">酷狗音乐2011</a></li>
	 				<li><a href="#" target="_blank">手机酷狗3.0版</a></li>
	 				<li><a href="#" target="_blank">酷狗网络收音机</a></li>
					<li><a href="#/" target="_blank">酷狗叮咚</a></li>
				</ul>
			</div>
		</div>
  </div>
 </div>
</body>
</html>

JS代码(jquery.focus.js):

jQuery.fn.Focus = function(o){
	o = jQuery.extend({
	nID:"#j_FocusNav",//左侧标题区IDcID:"#j_FocusCon",//右侧图片区IDbID:"#j_FocusBack",//左侧带箭头的背景IDfH:293 //内容切换的高度}
,o);
	return this.each(function(){
	var _scrollHeight = o.fH;
	var _navDom = jQuery(o.nID);
	var _conDom = jQuery(o.cID);
	var _navs = jQuery("li",_navDom);
	var _max = _navs.size()-1;
	var _back = jQuery(o.bID);
	var _timeInterval = false;
	var _curIndex = 0;
	var _cType = "add";
	var _changeType = function(type){
	type == "add" ? _curIndex++:_curIndex--;
}
var _cutover = function(){
	if (_curIndex>=_max){
	_cType = "jian";
}
if (_curIndex<=0){
	_cType = "add";
}
_changeType(_cType);
	_go(_navs.eq(_curIndex));
}
var _timer = function(){
	(_timeInterval)&&(clearInterval(_timeInterval));
	_timeInterval = setInterval(_cutover,6000);
}
var _go = function(dom){
	var _position = dom.position();
	_back.stop().animate({
	top:_position.top}
,500,"easeOutQuint");
	_conDom.stop().animate({
	"marginTop":-_scrollHeight * _curIndex + "px"}
,600,"easeInOutSine");
}
jQuery(this).bind("mouseenter",function(){
	clearInterval(_timeInterval);
}
).bind("mouseleave",function(){
	_timer();
}
);
	_navs.bind("mouseenter",function(){
	clearInterval(_timeInterval);
	var _self = jQuery(this);
	var _index = _self.attr("rel");
	_curIndex = _index;
	_go(_self);
}
).bind("mouseleave",function(){
	_timer();
}
);
	_timer();
}
);
}

CSS代码(styles.css):

*{margin:0;padding:0;}
#container{}
#footer{position:relative;height:70px;clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
body{background:#2a2b2d;font:13px/1.3 'Microsoft Yahei','宋体';color:#999;}
#page,#footer_inner{margin:0 auto;width:960px;}
h1#logo{overflow:hidden;height:93px;padding:25px 0;}
h1#logo a{display:block;height:93px;}
#container{margin:0 auto;}
#container h2{font-weight:normal;line-height:28px;}
#container p{padding:10px 0;}
.credit{text-align:center;padding:20px 0 100px;font-size:10px;}
a,a:visited{text-decoration:none;outline:none;color:#97cae6;}
a:hover{text-decoration:underline;}
#footer{background-color:#212121;width:100%;}
#footer h2{font-size:18px;font-weight:normal;height:70px;line-height:70px;font-family:"Microsoft Yahei";color:#eee;}
#footer_inner{position:relative;}
#footer a.tzine,a.tzine:visited{color:#FCFCFC;font-size:12px;line-height:70px;position:absolute;top:0;right:0;width:90px;}
/*-核心代码-*/
/* demo style */
.focusWrap{width:950px;height:300px;margin:10px auto;background:url(focusbg.gif) left top repeat;}
.focusCon{float:left;width:704px;}
.focusR{display:inline;float:right;width:236px;height:100%;margin-right:10px;}
.kugoo{width:100%;height:165px;background:url(kugou.png) left top no-repeat;}
.kugoo a{display:inline;float:left;width:202px;height:70px;margin:92px 0px 0px 10px;overflow:hidden;line-height:200px;text-decoration:none;}
.ulHot{float:left;width:100%;height:115px;margin-top:10px;background:url(kugou.png) right bottom no-repeat;}
.ulHot li{display:inline;float:left;width:100%;height:20px;line-height:20px;}
.ulHot li a{float:left;width:180px;padding-left:25px;background:url(arrow.gif) 16px center no-repeat;text-decoration:none;color:#fff;font-size:12px;}
.focusL{position:relative;float:left;width:140px;height:288px;margin-top:12px;background:url(line.png) left top repeat-y;}
.ulFocus{position:relative;width:100%;height:100%;left:0px;top:0px;z-index:2;}
.ulFocus li{display:inline;float:left;width:120px;height:38px;margin:5px 10px 2px 10px;color:#fff;font-size:12px;line-height:16px;}
.ulFocus li span{position:relative;display:block;width:100%;height:32px;padding-bottom:6px;z-index:2;cursor:pointer;}
.focusM{float:left;width:564px;height:293px;margin-top:6px;overflow:hidden;}
.ulFCon{float:left;width:100%;}
.ulFCon li{float:left;width:100%;height:293px;overflow:hidden;}
.ulFCon li a{display:block;width:100%;height:100%;text-decoration:none;}
.ulFCon li img{width:564px;height:293px;border:none;}
.back{position:absolute;width:166px;height:47px;background:url(titlebg.png) left top no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="./images/titlebg.png");top:0px;left:0px;z-index:1;}

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