四屏JS带缩略图和箭头的焦点图代码轮播滚动切换特效

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

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

以下是四屏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" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为四屏JS带缩略图和箭头的焦点图代码" />
<title>四屏JS带缩略图和箭头的焦点图代码</title>
<link href="images/index.css" type=text/css rel=stylesheet>
</head>
<body style="text-align:center">
<div id=focus_img>
<table id=focus_warp cellSpacing=0 cellPadding=0 width=325 border=0>
  <tbody>
  <tr>
    <td>
      <div id=au style="WIDTH: 325px">
      <div class=dis name="f"><A 
      href="#" 
      target=_blank><IMG height=225 alt=机动车排污费多此一举 
      src="images/01.gif" width=325></A></div>
      <DIV class=undis name="f"><A 
      href="#" target=_blank><IMG 
      height=225 alt=事业单位退休金降了，我们呢 src="images/02.jpg" 
      width=325></A></DIV>
      <DIV class=undis name="f"><A 
      href="#" target=_blank><IMG 
      height=225 alt=萧条时代找幸福 src="images/03.jpg" 
      width=325></A></DIV>
      <DIV class=undis name="f"><A href="#" target=_blank><IMG 
      height=225 alt=我的十年——腾讯十周年大型网友活动 src="images/04.jpg" 
      width=325></A></DIV></div></td></tr>
  <TR>
    <TD height=75>
      <TABLE id=simg cellSpacing=0 cellPadding=0 width=326 border=0>
        <TBODY>
        <TR>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#" 
            target=_blank><IMG height=56 src="images/sm1.gif" 
            width=77></A></TD>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#" 
            target=_blank><IMG height=56 src="images/sm2.jpg" 
            width=77></A></TD>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#" 
            target=_blank><IMG height=56 src="images/sm3.jpg" 
            width=77></A></TD>
          <TD class=s onmouseover="play(this,'au','');" align=right><A 
            href="#" target=_blank><IMG height=56 
            src="images/sm4.jpg" 
    width=77></A></TD></TR></TBODY></TABLE></TD></TR></tbody></table><A 
style="FLOAT: left; WIDTH: 30px; HEIGHT: 300px" 
href="#" 
target=_blank></A></div>
<script language=JavaScript src="js/img.js" type=text/javascript charset=gb2312></script>
</body>
</html>

JS代码(img.js):

function getid(obj)//ȡ��Ӧid��Ԫ��{
	return document.getElementById(obj);
}
function getNames(obj,name,tij)//ȡobjԪ���±�ǩΪtij��Ԫ�ز�Ҫ������name����=name;
	����һ������{
	var p = getid(obj);
	var plist = p.getElementsByTagName(tij);
	var rlist = new Array();
	for(i=0;
	i<plist.length;
	i++){
	if(plist[i].getAttribute("name") == name){
	rlist[rlist.length] = plist[i];
}
}
return rlist;
}
function ri(obj)//ȡ�ö�Ӧ��Сͼ�б��е�ǰԪ�ض�Ӧ�����{
	var p = getid("simg").getElementsByTagName("td");
	for(i=0;
	i<p.length;
	i++){
	if(obj == p[i]){
	return i;
}
}
}
function ci(obj)//Сͼѡ���Ĵ������{
	var p = getid("simg").getElementsByTagName("td");
	for(i=0;
	i<p.length;
	i++){
	if(obj ==p[i]){
	p[i].className ="s";
}
else{
	p[i].className ="";
}
}
}
function fiterplay(obj,num,t,name)//����ҳ���ĺ���.���ö�Ӧ���ݵ����غ���ʾ obj:Ԫ�ص�id name:Ԫ�ض�Ӧ��name���Ե�ֵ,t:��Ӧ���ݵı�ǩ num:��ǰѡ���Ԫ�ص����{
	var fitlist = getNames(obj,name,t);
	for(i=0;
	i<fitlist.length;
	i++){
	if(i == num){
	fitlist[i].className = "dis";
}
else{
	fitlist[i].className = "undis";
}
}
}
function play(obj,n1)//���ŵĺ���{
	var p = obj.parentNode.parentNode.getElementsByTagName("img");
	var au = getid(n1);
	var num = ri(obj);
	try//ie�µĴ������{
	with(au){
	filters[0].Apply();
	//�����˾�ci(obj);
	//���Сͼ��ѡ��.���Է���try����.fiterplay(n1,num,"div","f");
	//�����˾��ж�Ӧ���ֵ���ʾ������filters[0].play();
	//�����˾�}
}
catch(e)//ff�µĴ������{
	ci(obj);
	fiterplay(n1,num,"div","f");
}
}
var n=0;
	function clearAuto(){
	clearInterval(autoStart);
}
;
	function setAuto(){
	autoStart=setInterval("auto(n)",4000)}
function auto(){
	var x = getid("simg").getElementsByTagName("td");
	n++;
	if(n>3)n=0;
	play(x[n],"au");
}
function tabs_z(o,n){
	var m_n = document.getElementById(o).getElementsByTagName("em");
	var c_n = document.getElementById(o).getElementsByTagName("ol");
	for(i=0;
	i<m_n.length;
	i++){
	m_n[i].className=i==n?"tab_on":"";
	c_n[i].style.display=i==n?"block":"none";
}
}

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