动态切换图片javascript

<div style="float: left; width: 690px">
<table class="lmxm" style="margin-top: 0px; border-left-style: none" cellspacing="0"
cellpadding="0">
<tbody>
<tr>
<td valign="top">
<div style="float: left; margin-left: 10px; cursor: default; height: 36px">
<img src="jjdtcgan.gif" alt=""/></div>
<div style="font-weight: bold; float: right; cursor: hand; line-height: 30px; margin-right: 5px"
onclick="window.open('/article/about/succase/');">
更多》</div>
</td>
</tr>
<tr>
<td valign="top">
<!--头条开始-->
<div class="frontpage">
<script type="text/javascript">
var pics="";
var links ="";
var texts="";
pics += '|/jjdt/images/Image.jpg';
links += '|/article//about/succase/201007/20100700009852.shtml';
texts += '|青海盐湖钾肥股份有限公司湖区东部生产线及附属设备 溢价率565.82% 报价次数:54次';
pics += '|/jjdt/images/gznh.jpg';
links += '|/article/about/succase/201007/20100700009715.shtml';
texts += '|广州南海机器厂有限公司100%股权 溢价率:60% 报价次数:95次';
pics += '|/jjdt/images/2.jpg';
links += '|/article/about/succase/201005/20100500008786.shtml';
texts += '|鞍塔铁矿选矿厂机器设备、厂房、房屋建筑物、构筑物 最高报价次数299次,溢价率:330.89%';
pics += '|/jjdt/images/agcar2.jpg';
links += '|/article//about/succase/201005/20100500008802.shtml';
texts += '|2009年130辆鞍钢公务车网络竞价 标的:130个,成交:102个,成交率:78.0%,成交总额:553.41万元';
</script>
<div class="zlzsize">
<div id="bimg">
<script language="javascript" type ="text/javascript" >
var pic=pics.split("|");
var str=texts.split("|");
var lnk=links.split("|");
var num=str.length;
var nlnk=lnk.length;
for (i=1;i<num;i++){
if(i==1){
document.write("<div class=dis><a href="+lnk+" class=divlinks target=_blank><img border=0 src="+pic+"></a></div>");}
else{ document.write("<div class=undis><a href="+lnk+" class=divlinks target=_blank><img border=0 src="+pic+"></a></div>");}
}
</script>
</div>
<div>
<div class="zlznum">
<table id="simg" cellspacing="0" cellpadding="0" width="0" align="right" border="0">
<tbody>
<tr align="center" >
<script type ="text/javascript" >
for (i=1;i<num;i++){
if(i==1){
document.write("<td class=s>"+1+"</td>");}
else{ document.write("<td>"+i+"</td>");}
}
</script>
</tr>
</tbody>
</table>
</div>
<div class="img" id="info">
<script type ="text/javascript" >
for (i=1;i<num;i++){
document.write("<div class=dis><a href="+lnk+" class=divlinks target=_blank>"+str+"</a></div>");
}
</script>
</div>
</div>
</div>
<script type ="text/javascript" >
function $(v){return document.getElementById(v)}
var img = $("bimg").getElementsByTagName("div");
var td = $("simg").getElementsByTagName("td");
var text = $("info").getElementsByTagName("div");
var now = 1;
var count = num-1; //&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;
var def = 0; //&#300;&#65533;&#65533;&#65533;&#65533;&#702;
var speed = 5000; //10&#65533;&#65533;
//initialize
for(var i=0;i<count;i++){
//td
td.name = i;
td.className = "";
td.onclick = function (){changeBar(this.name)}
td.onmouseover = function(){clearauto()}
td.onmouseout = function(){setauto()}
//img
img.style.display = "none";
img.onmouseover = function(){clearauto()}
img.onmouseout = function(){setauto()}
//text
text.style.display = "none";
text.onmouseover = function(){clearauto()}
text.onmouseout = function(){setauto()}
}
//set default
td[def].className = "s";
img[def].style.display = "block";
text[def].style.display = "block";
function setClass(v){
for(var i=0;i<count;i++)
td.className = "";
td[v].className = "s";
}
function setImg(v){
try{
with (bimg){
filters[0].apply();
for(var i=0;i<count;i++){
img.style.display = "none";
text.style.display = "none";
}
img[v].style.display = "block";
text[v].style.display = "block";
filters[0].play();
}
}
catch(e){
for(var i=0;i<count;i++){
img.style.display = "none";
text.style.display = "none";
}
img[v].style.display = "block";
text[v].style.display = "block";
}
}
//contorl changed
function changeBar(v){
setClass(v);
setImg(v);
now= v+1;
}
//set auto
var auto = '';
function setChange(){
if(now<count){
changeBar(now);
}
else{
now = 0;
changeBar(now);
}
}
function setauto(){auto = setInterval("setChange()", speed)}
function clearauto(){clearInterval(auto)}
setauto();
</script>
</div>
<!--头条结束-->
</td>
</tr>
</tbody>
</table>
</div>
Tags: 

延伸阅读

最新评论

发表评论