娱乐频道7栏JS焦点图代码轮播滚动切换特效

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

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

以下是娱乐频道7栏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="此代码内容为娱乐频道7栏JS焦点图代码" />
<title>娱乐频道7栏JS焦点图代码</title>
<SCRIPT src="js/AutoChangePhoto.js" type=text/javascript></SCRIPT>
<style type="text/css">
<!--
BODY {FONT: 12px "宋体"; COLOR: #000;}
A:hover {COLOR: #000; TEXT-DECORATION: underline}
A {COLOR: #454545; TEXT-DECORATION: none}
.div_xixi {BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 617px; POSITION: relative; HEIGHT: 267px}
.div_jimg {	MARGIN: 0px; WIDTH: 405px; HEIGHT: 267px}
.div_jimg #a_jimg {DISPLAY: block; WIDTH: 405px; HEIGHT: 267px}
.div_jimg #bigimg {	BORDER-RIGHT: #fd8383 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fd8383 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #fd8383 1px solid; WIDTH: 403px; PADDING-TOP: 0px; BORDER-BOTTOM: #fd8383 1px solid; HEIGHT: 265px}
.div_jimg .ul_jimg {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; RIGHT: 0px; BACKGROUND: url(images/bg_j04.jpg) repeat-y right top; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 225px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 0px; HEIGHT: 267px}
.div_jimg .ul_jimg LI {DISPLAY: inline; FLOAT: right; OVERFLOW: hidden; WIDTH: 212px; CURSOR: pointer; WORD-BREAK: break-all; TEXT-INDENT: 30px; PADDING-TOP: 14px; WHITE-SPACE: nowrap; HEIGHT: 24px; TEXT-OVERFLOW: ellipsis}
.div_jimg .ul_jimg A {POSITION: relative}
.div_jimg .ul_jimg .on {background-image:url(images/bg_j05.png)!important;background-image:url(13141618.taobao.com);BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_j05.png',sizingMethod='scale'); WIDTH: 225px; COLOR: #fff; TEXT-INDENT: 43px; POSITION: static}
.div_jimg .ul_jimg .on A {FONT-WEIGHT: bold; COLOR: #fff}
-->
</style>
</head>
<body><br><br>

<table id=pictable style="DISPLAY: none">
  <TBODY>
  <TR>
    <TD><IMG src="images/0014224750740c7437691a.jpg" border=0></TD>
    <TD>郭富城拒娶进门 熊黛林扫便宜货</TD>
    <TD>#</TD></TR>
  <TR>
    <TD><IMG src="images/0014224750740c74379a39.jpg" border=0></TD>
    <TD>明星身价随票房涨 赵薇升最快</TD>
    <TD>#</TD></TR>
  <TR>
    <TD><IMG src="images/0014224750740c7437cc40.jpg" border=0></TD>
    <TD>张柏芝倚窗见光捧腹逃</TD>
    <TD>#</TD></TR>
  <TR>
    <TD><IMG src="images/0014224750740c70515526.jpg" border=0></TD>
    <TD>芙蓉姐姐妖艳登场</TD>
    <TD>#</TD></TR>
  <TR>
    <TD><IMG src="images/0014224750740c7051ab63.jpg" border=0></TD>
    <TD>老公新戏上映 李湘产后首次亮相</TD>
    <TD>#</TD></TR>
  <TR>
    <TD><IMG src="images/0014224750740c7052042f.jpg" border=0></TD>
    <TD>徐子淇探艾滋孤儿 打水烧柴憋尿</TD>
    <TD>#</TD></TR>
  <TR>
    <TD><IMG src="images/0014224750740c70524746.jpg" border=0></TD>
    <TD>精明港姐徐淑敏出嫁秘定3大条件</TD>
    <TD>#</TD></TR></TBODY></table>

<div class=div_xixi>
<script language=javascript type=text/javascript>
<!--
                var picarry = {};
                var lnkarry = {};
                var ttlarry = {};
                  function FixCode(str){
                    return str.replace("'","=");
                  }
                  var t=document.getElementById("pictable");
                  var rl=t.rows.length;
                  var baseu=  document.URL.replace(/(http.*\/)(.*)/, "$1"); 
                  if(baseu.indexOf("/servlet/")>=0)
                  baseu = baseu.replace("/servlet/","/");

                  var txt="";
                  for(var i=0;i<rl;i++){
                    try{
                        picarry[i]=t.rows[i].cells[0].childNodes[0].src;
                        lnkarry[i]=t.rows[i].cells[2].innerHTML;
                        ttlarry[i]=FixCode(t.rows[i].cells[1].innerHTML);
                        document.getElementById("li_jimg"+i).innerHTML = '<a href="'+lnkarry[id]+'" target="_blank" class="img"><img src="'+picarry[id]+'" alt=""><\/a>';
                        alert(picarry[i]);
                    }catch(e){
        
                    }
                }             
                    document.write("<div class='div_jimg\'><a class='a_jimg' id='a_jimg' href='"+lnkarry[0]+"' title='' style='background:url("+picarry[1]+")' target='_blank'><img id='bigimg' style='filter:RevealTrans (duration='1',transition='23'); visibility:visible;' alt='' src='"+picarry[0]+"'><\/a><ul class='ul_jimg'><li class='li_jimg on' id='li_jimg0' onmouseover='setfoc(0)' onmouseout='playit()'><a href='"+lnkarry[0]+"' target='_blank' class='img'>"+ttlarry[0]+"<\/a><\/li><li class='li_jimg' id='li_jimg1' onmouseover='setfoc(1)' onmouseout='playit()'><a href='"+lnkarry[1]+"' target='_blank' class='img'>"+ttlarry[1]+"<\/a><\/li><li class='li_jimg' id='li_jimg2' onmouseover='setfoc(2)' onmouseout='playit()'><a href='"+lnkarry[2]+"' target='_blank' class='img'>"+ttlarry[2]+"<\/a><\/li><li class='li_jimg' id='li_jimg3' onmouseover='setfoc(3)' onmouseout='playit()'><a href='"+lnkarry[3]+"' target='_blank' class='img'>"+ttlarry[3]+"<\/a><\/li><li class='li_jimg' id='li_jimg4' onmouseover='setfoc(4)' onmouseout='playit()'><a href='"+lnkarry[4]+"' target='_blank' class='img'>"+ttlarry[4]+"<\/a><\/li><li class='li_jimg' id='li_jimg5' onmouseover='setfoc(5)' onmouseout='playit()'><a href='"+lnkarry[5]+"' target='_blank' class='img'>"+ttlarry[5]+"<\/a><\/li><li class='li_jimg' id='li_jimg6' onmouseover='setfoc(6)' onmouseout='playit()'><a href='"+lnkarry[6]+"' target='_blank' class='img'>"+ttlarry[6]+"<\/a><\/li><\/ul><\/div>");
-->
</script>
</div>
</div>
</body>
</html>

JS代码(AutoChangePhoto.js):

var currslid = 0;
	var slidint;
	function setfoc(id){
	document.getElementById("bigimg").src = picarry[id];
	document.getElementById("a_jimg").href = lnkarry[id];
	if (id==4){
	document.getElementById("a_jimg").style.background = 'url('+picarry[0]+')'}
else{
	document.getElementById("a_jimg").style.background = 'url('+picarry[id+1]+')'}
currslid = id;
	for(i=0;
	i<7;
	i++){
	document.getElementById("li_jimg"+i).className = "li_jimg";
}
;
	document.getElementById("li_jimg"+id).className ="li_jimg on";
	var borserInfo=navigator.userAgent.toLowerCase();
	if(/msie/.test(borserInfo)){
	document.getElementById("bigimg").style.visibility = "hidden";
	document.getElementById("bigimg").filters[0].Apply();
	document.getElementById("bigimg").filters[0].transition=23;
	if (document.getElementById("bigimg").style.visibility == "visible"){
	document.getElementById("bigimg").style.visibility = "hidden";
}
else{
	document.getElementById("bigimg").style.visibility = "visible";
}
document.getElementById("bigimg").filters[0].Play();
}
stopit();
}
function playnext(){
	if(currslid==6){
	currslid = 0;
}
else{
	currslid++;
}
;
	setfoc(currslid);
	playit();
}
function playit(){
	slidint = setTimeout(playnext,2500);
}
function stopit(){
	clearTimeout(slidint);
}
window.onload = function(){
	playit();
}
function playit01(){
	document.getElementById("playStop").className = "stop";
	playit();
}
function stopit01(){
	document.getElementById("playStop").className = "play";
	stopit();
}

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