教程集 > 脚本编程 > javascript > 正文纯js div的万网首页广告图片幻灯切换效果

纯js div的万网首页广告图片幻灯切换效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供纯js div的万网首页广告图片幻灯切换效果等资源，欢迎您收藏本站，我们将为您提供最新的纯js div的万网首页广告图片幻灯切换效果资源

提示：您可以先修改部分代码再运行

纯js div的万网首页广告图片幻灯切换效果 <!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> <title>纯js div的万网首页广告图片幻灯切换效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312">  <style type="text/css"> .picshow{z-index:444;position:relative;background-color:#e4f2fa;width:100%;height:250px} .picshow_main{position:relative;width:690px;height:250px} .picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:690px;height:250px} .picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:0px;left:600px} .picshow_change img{width:15px;height:15px} .picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline} a.axx{border-color:#555} a.axx:hover{border-color:#000} a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4} a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0} a.bxx{border-color:#000} a.bxx:hover{border-color:#000} img{border:0px} </style> </head> <body>  <script language="javascript">  //图片滚动展示Start  var counts = 3;  img1 = new Image();  img1.src = 'http://www.zzsky.cn/effect/images/201002220830/index_ad1.jpg';  img2 = new Image();  img2.src = 'http://www.zzsky.cn/effect/images/201002220830/index_ad2.jpg';  img3 = new Image();  img3.src = 'http://www.zzsky.cn/effect/images/201002220830/index_ad3.jpg';  var smallImg = new Array();  //小图  smallImg[0] = 'http://www.zzsky.cn/effect/images/201002220830/index_adb1.gif';  smallImg[1] = 'http://www.zzsky.cn/effect/images/201002220830/index_adb2.gif';  smallImg[2] = 'http://www.zzsky.cn/effect/images/201002220830/index_adb3.gif';  //链接地址  url1 = new Image();  url1.src = 'http://www.zzsky.cn';  url2 = new Image();  url2.src = 'http://www.zzsky.cn';  url3 = new Image();  url3.src = 'http://www.zzsky.cn';  //alt值  alt1 = new Image();  alt1.alt = '现在购买虚拟主机免费开通在线客服功能（渠道除外）';  alt2 = new Image();  alt2.alt = '建站普及风暴，圣诞元旦礼上礼';  alt3 = new Image();  alt3.alt = '冬日暖阳 年度双薪';  var nn = 1;  var key = 0;  function change_img() {   if (key == 0) {    key = 1;   } else if (document.all) {    document.getElementById("pic").filters[0].Apply();    document.getElementById("pic").filters[0].Play(duration = 2);   }   eval('document.getElementById("pic").src=img' nn '.src');   eval('document.getElementById("url").href=url' nn '.src');   eval('document.getElementById("pic").alt=alt' nn '.alt');   if (nn == 1) {    document.getElementById("url").target = "_blank";    document.getElementById("url").style.cursor = "pointer";   } else {    document.getElementById("url").target = "_blank"    document.getElementById("url").style.cursor = "pointer"   }   for ( var i = 1; i <= counts; i ) {    document.getElementById("xxjdjj" i).className = 'axx';   }   document.getElementById("xxjdjj" nn).className = 'bxx';   nn ;   if (nn > counts) {    nn = 1;   }   tt = setTimeout('change_img()', 7000);  }  function changeimg(n) {   nn = n;   window.clearInterval(tt);   change_img();  }  function ImageShow() {   document.write('<div class="picshow_main">');   document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>');   document.write('<div class="picshow_change">');   for ( var i = 0; i < counts; i ) {    document.write('<a href="javascript:changeimg(' (i 1)      ');" id="xxjdjj' (i 1)      '" class="axx" target="_self"><img src="' smallImg[i]      '"></a>');   }   document.write('</div></div>');   change_img();  }  //图片滚动展示End </script> <script language="javascript" type="text/javascript">  ImageShow(); </script> </body> </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery幻灯片特效banner切换实例
 基于jquery的网站幻灯片切换效果焦点图代码
 基于jquery的15款幻灯片插件
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 jQuery幻灯片插件 Skitter
jquery幻灯片效果的插件一例
 jQuery图片幻灯手风琴效果插件 Slidorion
在网站上应该用的30个jQuery插件整理
 HTML5幻灯片系统：H5Slides
jQuery幻灯片插件 Slides

上一篇：js图片切换效果代码下一篇：让标题动态

[关闭]

纯js div的万网首页广告图片幻灯切换效果

最近更新

浏览排行