QQ音乐js焦点图轮播滚动切换特效代码

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

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

以下是 QQ音乐js焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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>QQ音乐js焦点图</title>
    <link href="css/foucs.css" rel="stylesheet" />
    <script src="js/foucs.js" type="text/javascript"></script>
</head>
<body>
<br>
    <!-- 代码 开始 -->
    <div class="mod_focus_show" id="divimgplay">
        <ul class="mod_focus_pic" id="divimginfog_imgPlayer">
            <li><a href="#" target="_blank">
                <img src="images/b01.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b02.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b03.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b04.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b05.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b06.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b07.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b08.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b09.jpg" alt="" width="700" height="320" /></a></li>
            <li><a href="#" target="_blank">
                <img src="images/b10.jpg" alt="" width="700" height="320" /></a></li>
        </ul>
        <ul class="mod_focus_title" id="ptitleg_imgPlayer">
            <li class="current">
                <h3><a href="#" target="_blank"></a></h3>
                <p></p>
            </li>
        </ul>
        <div class="focus_switch"><a href="javascript:;" class="icon_prev"></a><a href="javascript:;" class="icon_next"></a></div>
        <ul class="mod_focus_list" id="divpageinfog_imgPlayer">
            <li class="current"><a href="#" target="_blank">
                <img src="images/small01.jpg" alt="第1张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small02.jpg" alt="第2张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small03.jpg" alt="第3张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small04.jpg" alt="第4张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small05.jpg" alt="第5张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small06.jpg" alt="第6张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small07.jpg" alt="第7张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small08.jpg" alt="第8张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small09.jpg" alt="第9张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
            <li><a href="#" target="_blank">
                <img src="images/small10.jpg" alt="第10张图片的描述信息" width="60" height="60" /><span class="border"></span><span class="mask"></span></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        foucsbox(2500);
    </script>
</body>
</html>

JS代码(foucs.js):

var foucsbox = function (time){
	var time = time || 3500,$ = function (id){
	return document.getElementById(id);
}
,topCon = $('divimgplay'),big = $('divimginfog_imgPlayer'),samll = $('divpageinfog_imgPlayer'),tip = $('ptitleg_imgPlayer'),bigimgs = big.getElementsByTagName('li'),samllimgs = samll.getElementsByTagName('li'),imglink = tip.getElementsByTagName('a')[0],slide = function (z){
	samllimgs[lastIndex].className = '';
	samllimgs[z].className = 'current';
	bigimgs[lastIndex].style.display = 'none';
	bigimgs[z].style.display = 'block';
	try{
	imglink.innerHTML = samllimgs[z].getElementsByTagName('img')[0].alt;
}
catch (e){
	imglink.innerText = samllimgs[z].firstChild.firstChild.alt;
}
lastIndex = i = z;
}
,helper = function (z){
	return function (e){
	var na;
	if (!e){
	e = window.event;
	na = e.srcElement.nodeName;
}
else{
	na = e.target.nodeName;
}
if (na === 'IMG'){
	slide(z);
}
}
}
,lastIndex = i = 0,x,y = bigimgs.length,getPrevI = function (q){
	return i - q < 0 ? y - q:i - 1;
}
,getNextI = function (q){
	return i + q >= y ? i + q - y:i + 1;
}
var s = setInterval(function (){
	slide(i);
	i = getNextI(1);
}
,time);
	try{
	imglink.innerText = samllimgs[0].getElementsByTagName('img')[0].alt;
}
catch (e){
	imglink.innerText = samllimgs[0].firstChild.firstChild.alt;
}
for (x = 1;
	x < y;
	x += 1){
	bigimgs[x].style.display = 'none';
}
for (x = 0;
	x < y;
	x += 1){
	samllimgs[x].onmouseover = helper(x);
}
topCon.children[2].onclick = function (e){
	i = lastIndex;
	var t;
	if (!e){
	e = window.event;
	t = e.srcElement;
}
else{
	t = e.target;
}
switch (t.className){
	case 'icon_prev':slide(getPrevI(1));
	break;
	case 'icon_next':slide(getNextI(1));
	break;
}
}
;
	topCon.onmouseover = function (){
	clearInterval(s);
}
;
	topCon.onmouseout = function (){
	s = setInterval(function (){
	slide(i);
	i = getNextI(1);
}
,time);
}
;
}
;

CSS代码(foucs.css):

body,h3,p,ul,li{margin:0;padding:0;}
body{color:#8B8B8B;background-color:#FFF;font-size:12px;line-height:1.5em;font-family:Arial,Tahoma,"hiragino sans gb",Helvetica;}
h3{font-size:100%;}
li{list-style:none;}
img{border:0 none;-ms-interpolation-mode:bicubic;}
a{color:#515151;text-decoration:none;}
a:hover{color:#333;}
.mod_focus_show{width:700px;height:400px;position:relative;overflow:hidden;margin:0 auto;}
.mod_focus_show .mod_focus_pic{display:block;width:700px;height:320px;}
.mod_focus_show .mod_focus_pic li,.mod_focus_show .mod_focus_pic a,.mod_focus_show .mod_focus_pic img{display:block;width:700px;height:320px;}
.mod_focus_show .mod_focus_pic li{position:absolute;left:0;top:0;}
.mod_focus_show .mod_focus_title{position:absolute;z-index:1;left:0;bottom:80px;overflow:hidden;zoom:1;width:700px;height:53px;background-color:rgba(0,0,0,.8);filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000',endColorstr='#CC000000');background-image:url(about:blank);}
:root .mod_focus_title{filter:none;}
.mod_focus_show .mod_focus_title li{width:590px;padding:0 0 0 20px;overflow:hidden;word-break:keep-all;word-wrap:keep-all;white-space:nowrap;table-layout:fixed;-o-text-overflow:ellipsis;text-overflow:ellipsis;}
.mod_focus_show .mod_focus_title li h3{line-height:53px;_line-height:55px;font-size:28px;font-family:"Microsoft Yahei",Tahoma,Geneva;font-weight:500;}
.mod_focus_show .mod_focus_title li h3 a{color:#98e404;}
.focus_switch{width:59px;height:29px;position:absolute;z-index:2;right:15px;bottom:92px;}
.focus_switch a{float:left;width:29px;height:29px;background-image:url(../images/icon_focus_switch.png);background-repeat:no-repeat;cursor:pointer;}
.focus_switch .icon_prev{background-position:0 0;margin:0 1px 0 0;}
.focus_switch .icon_prev:hover{background-position:-30px 0;}
.focus_switch .icon_next{background-position:-60px 0;}
.focus_switch .icon_next:hover{background-position:-90px 0;}
.mod_focus_show .mod_focus_list{padding:10px 5px;background:#000;overflow:hidden;height:60px;}
.mod_focus_show .mod_focus_list li{width:60px;height:60px;float:left;margin:0 4px 0 5px;position:relative;*display:inline;}
.mod_focus_show .mod_focus_list li a{display:block;width:60px;height:60px;}
.mod_focus_show .mod_focus_list li img{display:block;width:60px;height:60px;}
.mod_focus_show .mod_focus_list li a:hover{_background:none;}
.mod_focus_show .mod_focus_list li a:hover .mask,.mod_focus_show .mod_focus_list .current .mask{display:none;}
.mod_focus_show .mod_focus_list li .mask{display:block;height:60px;width:60px;position:relative;top:-60px;margin:0 0 -60px;eft:0;bottom:0;background:#000;opacity:.5;filter:alpha(opacity=50);}
.mod_focus_show .mod_focus_list li .border{display:none;}
.mod_focus_show .mod_focus_list .current .border{display:block;height:5px;width:60px;font-size:0;overflow:hidden;position:absolute;left:0;bottom:0;background:#98e404;}

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