雅虎3屏js焦点图代码轮播滚动切换特效

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

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

以下是雅虎3屏js焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>abc</title>
<style type="text/css">
body{text-align:center}
td {font-size: 12px;}
.bottomline {BORDER-BOTTOM: #c3c3c3 1px solid}
.solidbox {BORDER: #c3c3c3 1px solid;width:466px}
</style>
<script language=Javascript src="js/bbs.js"></script>
</head>
<body>
<div id=top_slider>
<!--bbs s1 -->
<div id=bbs_s1 class=solidbox>
<table cellSpacing=0 cellPadding=0 width="466" border=0>
  <TBODY>
    <TR>
      <TD width="466" align=middle><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
          <TR>
            <TD align=middle width=70><STRONG>近日焦点</STRONG></TD>
            <TD width=10><IMG src="images/bbs_sl_p1.gif"></TD>
            <TD class=bottomline align=middle width=70><a 
            href="javascript:setFocus(2);"><STRONG>酷帖美图</STRONG></A></TD>
            <TD width=10><IMG src="images/bbs_sl_p2.gif"></TD>
            <TD class=bottomline align=middle width=70><a 
            href="javascript:setFocus(3);"><STRONG>经典名帖</STRONG></A></TD>
            <TD width=10><IMG src="images/bbs_sl_p2.gif"></TD>
            <TD class=bottomline align=right><TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
              <TBODY>
                <TR>
                  <TD align=right><A href="javascript:pre_img();"><IMG 
                  src="images/bu_back.gif" border=0></A> <A 
                  href="javascript:;"><IMG onclick=playorpau(this) 
                  src="images/bu_pau.gif" border=0></A> <A 
                  href="javascript:next_img();"><IMG 
                  src="images/bu_next.gif" border=0></A> 　 </TD>
                </TR>
              </TBODY>
            </TABLE></TD>
          </TR>
        </TBODY>
      </TABLE></TD>
    </TR>
    <TR>
      <TD style="PADDING: 5px"><A 
      href="#" 
      target=_blank><IMG height=160 src="images/01.jpg" width=456 
      border=0></A></TD>
    </TR>
  </TBODY>
</table>
</div>

<!--bbs s2 -->
<div id=bbs_s2 class=solidbox style="DISPLAY: none">
<table cellspacing=0 cellpadding=0 width="466" border=0>
  <tbody>
    <tr>
      <td width="466" align=middle><table cellspacing=0 cellpadding=0 width="100%" border=0>
        <tbody>
          <tr>
            <td class=bottomline align=middle width=70><a 
            href="javascript:setFocus(1);"><strong>近日焦点</strong></a></td>
            <td width=10><img src="images/bbs_sl_p2.gif"></td>
            <td align=middle width=70><strong>酷帖美图</strong></td>
            <td width=10><img src="images/bbs_sl_p1.gif"></td>
            <td class=bottomline align=middle width=70><a 
            href="javascript:setFocus(3);"><strong>经典名帖</strong></a></td>
            <td width=10><img src="images/bbs_sl_p2.gif"></td>
            <td class=bottomline align=right><table cellspacing=0 cellpadding=0 width=150 border=0>
              <tbody>
                <tr>
                  <td align=right><a href="javascript:pre_img();"><img 
                  src="images/bu_back.gif" border=0></a> <a 
                  href="javascript:;"><img onClick=playorpau(this) 
                  src="images/bu_pau.gif" border=0></a> <a 
                  href="javascript:next_img();"><img 
                  src="images/bu_next.gif" border=0></a> 　 </td>
                </tr>
              </tbody>
            </table></td>
          </tr>
        </tbody>
      </table></td>
    </tr>
    <tr>
      <td 
    style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><a 
      href="#" 
      target=_blank><img height=160 src="images/02.jpg" width=456 
      border=0></a></td>
    </tr>
  </tbody>
</table>
</div>

<!--bbs s3 -->
<div id=bbs_s3 class=solidbox style="DISPLAY: none">
<table cellspacing=0 cellpadding=0 width="466" border=0>
  <tbody>
    <tr>
      <td width="466" align=middle><table cellspacing=0 cellpadding=0 width="100%" border=0>
        <tbody>
          <tr>
            <td class=bottomline align=middle width=70><a 
            href="javascript:setFocus(1);"><strong>近日焦点</strong></a></td>
            <td width=10><img src="images/bbs_sl_p2.gif"></td>
            <td class=bottomline align=middle width=70><a 
            href="javascript:setFocus(2);"><strong>酷帖美图</strong></a></td>
            <td width=10><img src="images/bbs_sl_p2.gif"></td>
            <td align=middle width=70><strong>经典名帖</strong></td>
            <td width=10><img src="images/bbs_sl_p1.gif"></td>
            <td class=bottomline align=right><table cellspacing=0 cellpadding=0 width=150 border=0>
              <tbody>
                <tr>
                  <td align=right><a href="javascript:pre_img();"><img 
                  src="images/bu_back.gif" border=0></a> <a 
                  href="javascript:;"><img onClick=playorpau(this) 
                  src="images/bu_pau.gif" border=0></a> <a 
                  href="javascript:next_img();"><img 
                  src="images/bu_next.gif" border=0></a> 　 </td>
                </tr>
              </tbody>
            </table></td>
          </tr>
        </tbody>
      </table></td>
    </tr>
    <tr>
      <td 
    style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><a 
      href="#" 
      target=_blank><img height=160 src="images/03.jpg" 
      width=456 border=0></a></td>
    </tr>
  </tbody>
</table>
</div>
</div>
</body>
</html>

JS代码(bbs.js):

var isStart=true;
	var nn;
	var tt;
	var bPlay=new Image;
	bPlay.src = "http://makewing.com/lanren/js/18/images/bu_pla.gif";
	var bPause=new Image;
	bPause.src = "http://makewing.com/lanren/js/18/images/bu_pau.gif";
	nn=1;
	setTimeout('change_img()',4000);
	function resetPlay(){
	isStart=true;
	var e = document.getElementById("top_slider");
	var a = e.getElementsByTagName("img");
	for(i=0;
	i<a.length;
	i++){
	if(a[i].src == bPlay.src) a[i].src = bPause.src;
}
}
function playorpau(e){
	if(e.src == "http://makewing.com/lanren/js/18/images/bu_pau.gif"){
	e.src = bPlay.src;
	isStart = false;
}
else{
	e.src = bPause.src;
	isStart = true;
}
}
function pre_img(){
	resetPlay();
	nn--;
	if(nn < 1) nn=3;
	setFocus(nn);
}
function next_img(){
	resetPlay();
	nn++;
	if(nn > 3) nn=1;
	setFocus(nn);
}
function change_img(){
	if(isStart){
	nn++;
	if(nn>3) nn=1;
	setFocus(nn);
}
else{
	tt=setTimeout('change_img()',100);
}
}
function setFocus(i){
	if(tt) clearTimeout(tt);
	nn = i;
	selectLayer1(i);
	tt=setTimeout('change_img()',4000);
}
function selectLayer1(i){
	switch(i){
	case 1:document.getElementById("bbs_s1").style.display="block";
	document.getElementById("bbs_s2").style.display="none";
	document.getElementById("bbs_s3").style.display="none";
	break;
	case 2:document.getElementById("bbs_s1").style.display="none";
	document.getElementById("bbs_s2").style.display="block";
	document.getElementById("bbs_s3").style.display="none";
	break;
	case 3:document.getElementById("bbs_s1").style.display="none";
	document.getElementById("bbs_s2").style.display="none";
	document.getElementById("bbs_s3").style.display="block";
	break;
}
}

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