图片自动切换并改变链接代码

 

 
<script language="javascript" type="text/javascript">

indeximg1 = new Image();
indeximg1.src="Image/Blue hills.jpg";
indexurl1 = 'http://www.baidu.com';
indextxt1 = '百度';


indeximg2 = new Image();
indeximg2.src ="Image/Sunset.jpg";;
indexurl2 = 'http://google.cn';
indextxt2 = '谷歌';
indeximg3 = new Image();
indeximg3.src ="Image/Winter.jpg";;
indexurl3 = 'http://www.hao123.com';
indextxt3 = '网址大全';


indeximg4 = new Image();
indeximg4.src ="Image/Blue hills.jpg";;
indexurl4 = 'http://mail.163.com';
indextxt4 = '网易';
</script> 
    
    
  <script type="text/javascript">
    

    var widths=305; //焦点图片宽
    var w=2;
    var widthss=widths+w;
    var heights=201; //焦点图片高
    var heightss=heightss+w;
    var heightt=27;
    var counts=3; //总条数
    var nn=1; //当前所显示的滚动图
    var key=0; //标识是否为第一次开始执行
    var tt; //标识作用

    function change_img()
    {
     if(key==0){key=1;}
     else if(document.all)//document.all仅IE6/7认识,firefox不会执行此段内容
     {
      document.getElementById("pic").filters[0].Apply(); //将滤镜应用到对像上
      document.getElementById("pic").filters[0].Play(duration=2); //开始转换
      document.getElementById("pic").filters[0].Transition=23;//转换效果
     }

     eval('document.getElementById("pic").src=indeximg'+nn+'.src'); //替换图片
     eval('document.getElementById("url").href=indexurl'+nn+''); //替换URL
     eval('document.getElementById("pic").alt=indextxt'+nn+''); //替换ALT
     eval('document.getElementById("title").innerHTML=indextxt'+nn+''); //替换ALT

     for (var i=1;i<=counts;i++)
     {
      document.getElementById("xxjdjj"+i).className='axx'; //将下面黑条上的所有链接变为未选中状态
     }
     document.getElementById("xxjdjj"+nn).className='bxx'; //将当前页面的ID设置为选中状态
     nn++;
     if(nn>counts){nn=1;} //如果ID大于总图片数量。则从头开始循环
     tt=setTimeout('change_img()',5000); //在3秒后重新执行change_img()方法.
    }
    function changeimg(n)//点击黑条上的链接执行的方法。
    {
     nn=n; //当前页面的ID等于传入的N值,
     window.clearInterval(tt); //清除用于循环的TT
     //重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
     change_img();
    }
    //样式表
    document.write('<style>');
    document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;font-size:12px;}');
    document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font-size:12px;background-color:#666;}');
    document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font-size:12px;background-color:#999;}');
    document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
    document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font-size:12px;background-color:#009900;}');
    document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font-size:12px;background-color:#ff9900;}');
    document.write('</style>');
    //内容部分
    document.write('<div style="width:'+widthss+'px;height:234px;overflow:hidden;text-overflow:clip;text-align:center;margin:0 auto;0">');
    document.write('<div><a id="url" target="_blank"><img id="pic" style="border:1px #cbcbcb solid;FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)" width='+widths+' height='+heights+' /></a></div>');
    document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=90);background: #888888;width:100%-2px;text-align:right;top:-16px;position:relative;margin:1px;height:14px;border:0px;padding-top:1px;z-index:4000;"><div>');
    for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
    document.write('</div></div>');
    document.write('<div align=center><div class="solidtxt" id="title" style="top:-16px;height:24px;line-height:24px;background-color:#f2f6fb;border:0px solid #f2f6fb;color:#000;font-size:14px;position:relative;text-align:center;"></div></div>');
    document.write('</div>');
    //开始执行滚动操作
    change_img();

    
        </script>   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值