<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="../css/index1.css" type="text/css">
<script src="../js/index1.js"></script>
<script src="../js/jQuery.js"></script>
<script>
$(document).ready(function(){
$("#rank").mouseenter(function(){
$("#middle").animate({width:225},"slow");
$("#middle ul").css("display","block")
});
$("#middle").mouseleave(function(){
$("#middle").animate({width:0},"20");
$("#middle ul").css("display","none")
});
$("#la").click(function(){
if($("#concent").css('right')=='-566px'){
$("#concent").animate({right:'-233px'},1000);
}else{
$("#concent").animate({right:'-566px'},1000);
}
});
$("#le").mouseenter(function(){
$("#middle1").animate({width:225},"slow");
$("#middle1 ul").css("display","block")
});
$("#middle1").mouseleave(function(){
$("#middle1").animate({width:0},"20");
$("#middle1 ul").css("display","none")
});
$("#zhuanji").mouseenter(function(){
$("#middle1").animate({width:0},"20");
$("#middle1 ul").css("display","none")
});
$("#zhuanji").mouseenter(function(){
$("#middle").animate({width:0},"20");
$("#middle ul").css("display","none")
});
$("#a").mouseenter(function(){
$("#middle").animate({width:0},"20");
$("#middle ul").css("display","none")
});
});
</script>
</head>
<body>
<div class="bg">
<div class="pic"></div>
<div class="left" style="position:fixed;">
<div class="dal">
<div class="logo">
<img src="../images/logo.png"></div>
<div class="navlt" >
<ul id="oul">
<li id="le" class="le"><i>></i><a href="musickind.html">音乐分类</a></li>
<li id="zhuanji" class="zhuanji"><a href="dvd.html">专辑</a><i>></i></li>
<li id="rank" class="rank"><a href="rank list.html">排行榜</a><i>></i></li>
<li class="a" id="a"><a href="index1.html">首页</a><i>></i></li>
<li class="b"><a href="mymusic.html">我的音乐</a><i>></i></li>
<li class="c"><a href="kind.html">精选集</a><i>></i></li>
<li class="d"><a href="message.html">在线留言</a><i>></i></li>
</ul>
</div></div>
<div id="middle">
<ul style="display:none;">
<li><a href="#">内地榜</a></li>
<li><a href="#">港台榜</a></li>
<li><a href="#">流行榜</a></li>
<li><a href="#">媒体流行榜</a></li>
<li><a href="#">美国公告榜</a></li>
<li><a href="#">iTunes榜</a></li>
<li><a href="#">韩国MNET榜</a></li>
<li><a href="#">日本公信榜</a></li>
<li><a href="#">KTV排行榜</a></li>
<li><a href="#">英国UK榜</a></li>
</ul></li>
</div>
<div id="middle1">
<ul style="display:none;">
<li><a href="musickind.html">伤感歌曲</a></li>
<li><a href="musickind1.html">影视歌曲</a></li>
<li><a href="musickind2.html">流行歌曲</a></li>
<li><a href="musickind4.html">网络歌曲</a></li>
<li><a href="musickind5.html">经典歌曲</a></li>
<li><a href="musickind6.html">搞笑歌曲</a></li>
<li><a href="musickind3.html">摇滚歌曲</a></li>
<li><a href="musickind7.html">欧美歌曲</a></li>
<li><a href="musickind8.html">非主流歌曲</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="navrt" style="position:fixed;">
<img src="../images/13.jpg" id="pic" alt="">
</div>
<div class="p">每一首音乐总能代表一种心情，而我们内心不太平静的时候无论是喜是忧也总能试图着寻找一段音乐表达自己的遗憾，说明音乐
与心情是有的必然的联系</div>
<div class="citle1">
<p>音乐让我说，life is music</p>
</div>
<div class="citle2">
<p>一首我喜爱的乐曲，所传给我的思想和意义是不能用语言表达的</p>
</div>
<div class="citle3">
<p>无论你的现在心情是哪一种，那就让音乐治愈你吧</p>
</div>
</div>
</div>
<div class="down">
<div class="rel">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">申请友链</a></li>
<li><a href="#">联系站长</a></li>
<li><a href="#">返回顶部</a></li>
</ul>
</div>
<div class="dn">
<ul>
<h3>关于我们</h3>
<li><a href="#">会员协议</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">合作伙伴</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">用户协议</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</div>
<div class="dn">
<ul>
<h3>下载音乐</h3>
<li><a href="#">Android安卓</a></li>
<li><a href="#">PC客户端</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#"> Symbian塞班</a></li>
<li> <a href="#">Windows Phone</a></li>
</ul>
</div>
<div class="dn">
<ul>
<h3>联系方式</h3>
<li><a href="#">登陆会员</a></li>
<li><a href="#">官方微信公众号:htqyyw</a></li>
<li><a href="#">官方QQ群:111674269</a></li>
<li><a href="#">TEL:000-4123-2343</a></li>
</ul>
</div>
<div class="dnn">
CopyRight©2009 - 2016 好听轻音乐网 All Rights Reserved好听轻音乐<br>
本站所有音乐均来自互联网搜集，版权为原作者所有，如有侵犯权益，请联系我们删除！-- 粤ICP备09089950号
</div>
</div> </div></div>
</body>
</html>
--------------------------------------------------------------------
//index1.js部分
// JavaScript Document
window.onload=function(){
var oprev=document.getElementById("prev");
var onext=document.getElementById("next");
var obox=document.getElementsByClassName("box")[0];
var adiv=obox.getElementsByTagName("div");
var oimg=document.getElementById("pic");
var arrUrl=['../images/banner-1.jpg','../images/banner-2.jpg','../images/banner-3.jpg','../images/banner-4.jpg']
var num=0;
var timer=null;
oprev.onclick=function(){
clearInterval(timer);
num--;
if(num==-1){
num=arrUrl.length-1;
}
modify();
}
onext.onclick=function(){
clearInterval(timer);
num++;
if(num==arrUrl.length){
num=0;
}
modify();
}
function anpaly(){
num++;
if(num==arrUrl.length){
num=0;}
modify();
}
timer=setInterval(anpaly,1000)
for(var i=0;i<adiv.length;i++)
{
adiv[i].index = i;
adiv[i].onclick = function(){
clearInterval(timer);
num = this.index;
modify();
/* timer = setInterval(anpaly,1000);*/
}
}
function modify(){
oimg.src=arrUrl[num];
for(i=0;i<adiv.length;i++){
adiv[i].className="circle"+i
}
adiv[num].className+=" active"
}
obox.onmouseover=function(){
clearInterval(timer);
}
obox.onmouseout=function(){
timer=setInterval(anpaly,1000);
}
}