三更论坛技术版『 网站建设 』 → 幻灯片显示图片及其超级链接


  共有11507人关注过本帖树形打印复制链接

主题:幻灯片显示图片及其超级链接

帅哥哟,离线,有人找我吗?
荞麦
  1楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
幻灯片显示图片及其超级链接  发帖心情 Post By:2006-7-5 8:48:14 [只看该作者]

随机显示,刷新一下就改变幻灯片效果

 

效果演示http://bbs.9430.cn/gg/banner.htm

 

1、在网页中增加如下代码

 

<div align=center><IFRAME marginWidth=0 marginHeight=0 src="http://bbs.9430.cn/gg/banner.htm" frameBorder=0 noResize width=500 scrolling=no height=60></IFRAME></div>

 

2、调用的banner.htm网页代码:

 

function reapply()
{
setTimeout("slideit()",3000)
return true
}
window.onerror=reapply
</SCRIPT>

<SCRIPT language=javascript1.1>

//设定图片的网址
var image1=new Image()
image1.src="01.gif"
var image2=new Image()
image2.src="02.gif"
var image3=new Image()
image3.src="03.gif"
var image4=new Image()
image4.src="04.gif"
var image5=new Image()
image5.src="05.gif"
</SCRIPT>

</HEAD>

<BODY bgColor=#ffffff onload=slideit() leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<p align="center">
<a href="javascript:slidelink()"><img src="01.gif" name="slide" border=0
style="filter:revealTrans(Duration=2, Transition=23)" width=500 height=60></a>

<script>

//图片数目
var number_of_images=5
//显示时间,步长
var speed=2
var step=1
var whichimage=1

function slideit()
{
if (!document.images)
return
if (document.all)
slide.filters.item(0).Apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.item(0).Play()
whichimage=step
if (step<number_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}

function slidelink()
{
//图片对应的链接
popup = window.open('', 'newwin');
if (whichimage==1)
popup.location.href="http://9430.cn/";
if (whichimage==2)
popup.location.href="http://9430.cn/bbs/index.asp?boardid=15";
if (whichimage==3)
popup.location.href="http://9430.cn/bbs/index.asp?boardid=54";
if (whichimage==4)
popup.location.href="http://9430.cn/bbs/dispbbs.asp?boardID=16&ID=1846&page=1";
else if (whichimage==5)
popup.location.href="http://9430.cn/bbs/dispbbs.asp?boardID=54&ID=2621&page=1";
}

</script>

 

说明:

 

1、可直接把上面的代码放在网页里面使用

2、图片大小设置在:width=500 height=60

3、图片的网址,自己修改。这里的图片在相对根目录,所以直接写成src="01.gif"之类。



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部
帅哥哟,离线,有人找我吗?
荞麦
  2楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
  发帖心情 Post By:2006-8-4 12:54:13 [只看该作者]



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部
帅哥哟,离线,有人找我吗?
荞麦
  3楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
向上转动的幻灯片广告  发帖心情 Post By:2009-4-22 17:50:57 [只看该作者]

1、在网页中嵌入广告网页up.htm

 

<iframe src="http://网址/up.htm" height="90" width="760" marginwidth="0" marginheight="0"  frameborder="0" scrolling="no"></iframe>

 

2、up.htm的代码

 

<html>
<head>
<meta http-equiv="Content-Type" c>
<title>向上转动的广告</title>
<style type="text/css">
</style>
</head>

<body>
<table width="760"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="760"><div id=icefable1>
        <table width="760"  border="0" cellpadding="0" cellspacing="0">
         
<!--第1幅图片-->         
          <tr>    
            <td height="90"><a href="http://图片1链接的网址" target="_blank"><img src="http://图片1的网址" width="760" height="90" border="0"></a></td>
          </tr>
<!--第2幅图片-->  
          <tr>
            <td height="90"><a href="http://图片2链接的网址" target="_blank"><img src="http://图片2的网址" width="760" height="90" border="0"></a></td>
          </tr>
<!--第3幅图片-->
         <tr>
            <td height="90"><a href="http://图片3链接的网址" target="_blank"><img src="http://图片3的网址" width="760" height="90" border="0"></a></td>
          </tr>
        </table>

<script>

//以下设置图片向上转动效果

marqueesHeight=90;
stopscroll=false;
with(icefable1){
   style.width=0;
   style.height=marqueesHeight;
   style.overflowX="visible";
   style.overflowY="hidden";
   noWrap=true;
   onmouseover=new Function("stopscroll=true");
   onmouseout=new Function("stopscroll=false");
  }
  preTop=0; currentTop=marqueesHeight; stoptime=0;
  icefable1.innerHTML+=icefable1.innerHTML;
 

function init_srolltext(){
  icefable1.scrollTop=0;
  setInterval("scrollUp()",1);
}init_srolltext();

function scrollUp(){
  if(stopscroll==true) return;
  currentTop+=1;
  if(currentTop==marqueesHeight+1)
  {
   stoptime+=1;
   currentTop-=1;
   if(stoptime==400)
   {
    currentTop=0;
    stoptime=0;    
   }
  }
  else {   
   preTop=icefable1.scrollTop;
   icefable1.scrollTop+=1;
   if(preTop==icefable1.scrollTop){
     icefable1.scrollTop=marqueesHeight;
     icefable1.scrollTop+=1;
    
   }
  }

}
init_srolltext();
</script>
    </div>
 </td>
  </tr>
</table>
</body>
</html>



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部
帅哥哟,离线,有人找我吗?
荞麦
  4楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:坛主 帖子:7889 积分:39456 威望:0 精华:5 注册:2004-7-31 17:34:24
渐隐渐显的幻灯片广告  发帖心情 Post By:2009-4-22 18:09:05 [只看该作者]

广告效果http://bbs.9430.cn/gg/moonet/moonet.htm

 

把后面的代码,直接放在网页里面,或者保存为htm网页文件,然后在网页中嵌入。

说明:各自图片对应各自的超级链接,图片为静止图片,但幻灯片显示为渐隐渐显的效果。

 

1、嵌入网页代码

 

<iframe src="http://广告网页文件.htm" height="90" width="800" marginwidth="0" marginheight="0"  frameborder="0" scrolling="no"></iframe>

 

2、广告代码

 

<div align="center">

<table cellpadding="3" cellspacing="1" class="tableborder1" style="margin-bottom:8px;">
<tr>
<td width="100%" class="tablebody1" height="20" style="text-align : center; ">

<SCRIPT>
 var NowFrame = 1;
 var MaxFrame = 2;
 var bStart = 0;
 function fnToggle() {
 var next = NowFrame + 1;
 if(next == MaxFrame+1)
 {
 NowFrame = MaxFrame;
 next = 1;
 }
 if(bStart == 0)
 {
 bStart = 1;
    
 setTimeout('fnToggle()', 3000);
 return;
 }
 else
 {
 oTransContainer.filters[0].Apply();
 document.images['oDIV'+next].style.display = "";
 document.images['oDIV'+NowFrame].style.display = "none";
 oTransContainer.filters[0].Play(duration=5);
 if(NowFrame == MaxFrame)
 NowFrame = 1;
 else
 NowFrame++;
 } setTimeout('fnToggle()', 8000);
 }
 fnToggle();
</SCRIPT>

<!--焦点图片开始-->
<DIV id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion='forward'); WIDTH: 800px; HEIGHT: 90px">

 

<!--图片01-->

<A href="http://moonet.cn" target=_blank><IMG id=oDIV1 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; DISPLAY: yes;  BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid" height=90 src="moonet01.gif" width=800 border=0></A>

 

<!--图片02-->

<A href="http://net.moonet.cn" target=_blank><IMG id=oDIV2 style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; DISPLAY: none; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid" height=90 src="moonet02.gif" width=800 border=0></A>

 

</DIV>
<!--焦点图片结束-->
</tr>
</table>
</div>



三更论坛交流群:11484137 三更有梦休闲群:30275742
荞麦的新浪博客:http://blog.sina.com.cn/qiaomai
有事请点这里与荞麦临时会话QQ留言
 回到顶部