酷我音乐首页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=utf-8" />
<link rel="stylesheet" href="css/index0521.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title>酷我音乐首页jQuery焦点图代码</title>
</head>
<body>
<div id="content">
	<div id="main" class="clearfix">
		<div id="index_b_hero">
			<div class="hero-wrap">
				<ul class="heros clearfix">
					<li class="hero">
					<a id="jdtpic1" href="#" target="_blank">
					<img src="images/1430828144464_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/1400225686925_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/1431945288861_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/1431864610956_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/1431682421036_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/1431252761602_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/1431341253113_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/1429844270248_.jpg"></a></li>
					<li class="hero">
					<a href="#" target="_blank">
					<img src="images/younger.jpg"></a></li>
				</ul>
			</div>
			<div class="helper"><a href="javascript:;" class="prev"><div class="mask-left"></div></a><a href="javascript:;" class="next"><div class="mask-right"></div></a></div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/if.Common.Banner.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
jQuery(function(){
	var len = jQuery(".heros li").length;
	jQuery(".heros li").each(function(index, element) {
	    len--;
	    jQuery(this).css("z-index", len);
	});
	jQuery(".hero").mousemove(function(){
		jQuery(".mask-left, .mask-right").show();
	});
	jQuery("#main").mouseleave(function(){
		jQuery(".mask-left, .mask-right").hide();
	});
})
</script>
</body>
</html>

JS代码(index.js):

//轮播图jQuery.foucs({
	direction:'left'}
);
	//tab切换var $div_li =jQuery("div.tab_menu ul li");
	$div_li.mousemove(function(){
	jQuery(this).addClass("selected") .siblings().removeClass("selected");
	var index = $div_li.index(this);
	jQuery("div.tab_box > div").eq(index).show().siblings().hide();
}
);
	jQuery(".mvalbum li a.img").mousemove(function(){
	jQuery(this).parent().find("a.play").show();
}
);
	jQuery(".mvalbum li").mouseleave(function(){
	jQuery(this).find("a.play").hide();
}
);
	//首页专题var page = 1;
	var i = 1;
	//向后 按钮 jQuery(".weekSinger .next").click(function(){
	//绑定click事件 var $parent = jQuery(this).parents("div.weekSinger");
	//根据当前点击元素获取到父元素 var $v_show = $parent.find("div.scroll");
	//寻找到“视频内容展示区域” var $v_content = $parent.find("div.content");
	//寻找到“视频内容展示区域”外围的DIV元素 var v_width = $v_content.width();
	var len = $v_show.find(".singer").length;
	var page_count = Math.ceil(len);
	//只要不是整数，就往大的方向取最小的整数 if( !$v_show.is(":animated") ){
	//判断“视频内容展示区域”是否正在处于动画 if( page == page_count ){
	//已经到最后一个版面了,如果再向后，必须跳转到第一个版面。$v_show.animate({
	left:'0px'}
,"slow");
	//通过改变left值，跳转到第一个版面page = 1;
}
else{
	$v_show.animate({
	left:'-='+v_width}
,"slow");
	//通过改变left值，达到每次换一个版面page++;
}
}
}
);
	//往前 按钮 jQuery(".weekSinger .prev").click(function(){
	self.clearInterval(timer);
	var $parent = jQuery(this).parents("div.weekSinger");
	//根据当前点击元素获取到父元素 var $v_show = $parent.find("div.scroll");
	//寻找到“视频内容展示区域” var $v_content = $parent.find("div.content");
	//寻找到“视频内容展示区域”外围的DIV元素 var v_width = $v_content.width();
	var len = $v_show.find(".singer").length;
	var page_count = Math.ceil(len);
	//只要不是整数，就往大的方向取最小的整数 if( !$v_show.is(":animated") ){
	//判断“视频内容展示区域”是否正在处于动画 if( page == 1 ){
	//已经到第一个版面了,如果再向前，必须跳转到最后一个版面。$v_show.animate({
	left:'-='+v_width*(page_count-1)}
,"slow");
	page = page_count;
}
else{
	$v_show.animate({
	left:'+='+v_width}
,"slow");
	page--;
}
}
timer = setInterval('jQuery(".weekSinger .next").trigger("click")',5000);
}
);
	var timer = setInterval('jQuery(".weekSinger .next").trigger("click")',5000);
	//歌曲排行榜jQuery(".line").hover(function(){
	jQuery(this).addClass("current");
}
,function(){
	jQuery(this).removeClass("current");
}
);
	//ipad弹出浮层if(window.location.href.indexOf("src=ipad")>-1){
	document.getElementById('tips_b').style.display='block';
}
function logDown(pro){
	var img = new Image();
	var t=new Date().getTime();
	img.src = 'http://webstat.kuwo.cn/www/musicdown_' + pro + '.gif?t=' + t;
}
function downTj(pro){
	var img = new Image();
	//pro=down/pro=clickimg.src ='http://webstat.kuwo.cn/logtj/comm/commjstj/www/musicdown_' + pro + '.jpg';
}

CSS代码(base20140519.css):

@CHARSET "UTF-8";/* reset */

CSS代码(index0521.css):

body{padding:0;margin:0}
#main{display:block;overflow:hidden;width:100%;min-width:1000px;position:relative;background:#EFF4F5;}
#index_b_hero{width:1000px;height:420px;margin:0 auto;position:relative;}
#index_b_hero img{width:1000px;height:420px;}
#index_b_hero .heros{width:1000;height:420px;}
#index_b_hero .hero-wrap{overflow:visible;position:absolute;}
#index_b_hero .next,#index_b_hero .prev{background:url(http://image.kuwo.cn/www2014/empty.gif);position:absolute;top:0;width:1000px;height:420px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#D8FFFFFF',endColorstr='#D8FFFFFF');background:rgba(255,255,255,0.60);}
#index_b_hero .next:hover,#index_b_hero .prev:hover{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#D8FFFFFF',endColorstr='#D8FFFFFF');background:rgba(255,255,255,0.65);}
#index_b_hero .prev{left:-999px;}
#index_b_hero .next{left:1000px;}
#index_b_hero .disabled{background-color:#eee;}
#index_b_hero .hero{background:#000;position:absolute;top:0;left:0;width:1000px;height:420px;overflow:hidden;left:2000px;}
#index_b_hero .mask-right{left:-100px;}
#index_b_hero .mask-left{right:-100px;}
#index_b_hero .active{z-index:2;left:0;}
#index_b_hero .mask-right,#index_b_hero .mask-left{position:absolute;top:50%;height:78px;width:78px;overflow:hidden;margin-top:-39px;background:url(http://image.kuwo.cn/www2014/FocusBtn.png) no-repeat;z-index:1000;display:none;}
#index_b_hero .mask-right{background-position:-78px 0;}
#index_b_hero .mask-right:hover{background-position:-78px -78px;}
#index_b_hero .mask-left{background-position:0 0;}
#index_b_hero .mask-left:hover{background-position:0px -78px;}

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