lictor 发表于 2007 年 1 月 2 日 23:33:27

如何写图片广告上下翻动的代码?

一行8 个图片,5秒钟后上翻显示另外8个图片,5秒钟后下翻显示另外8个图片,如此循环,共有5组图片,

客户要求作这样的效果,我想破头也没写出来,救命!

iyaner 发表于 2007 年 1 月 2 日 23:35:06

flash偶就知道怎么做!java就不晓得了

waitme 发表于 2007 年 1 月 2 日 23:36:18

呵呵。。下个JS看下。。如何实现的

wbws 发表于 2007 年 1 月 2 日 23:36:59

看看http://bbs.163.com有个效果可以仿照的

lictor 发表于 2007 年 1 月 2 日 23:38:03

我要找的就是JavaScript的
或者做个FLASH的能读取外部图片的?

Cn.modao 发表于 2007 年 1 月 2 日 23:41:52

163的哪个
<div class="list">
<div class="num">
<ul>
<li><img src="http://cimg2.163.com/cnews/newimg/bbs/up.gif" alt=" " id="upbtn" style="cursor: pointer;" onclick="slideup();clearInterval(interval01);" onfocus="this.blur()" height="15" width="35"></li>
<li class="num1" id="led1">01</li>
<li class="num1" id="led2">02</li>
<li class="num2" id="led3">03</li>
<li><img src="http://cimg2.163.com/cnews/newimg/bbs/down.gif" alt=" " id="downbtn" style="cursor: pointer; display: none;" onclick="slidedown();clearInterval(interval01);" onfocus="this.blur()" height="15" width="35"></li>
</ul>
</div>
<script language="javascript">
var checkloaded=new Array();
for(i=1;i<=3;i++){
checkloaded=0;
}
function checkdamie(n){
        checkloaded=1;
        //alert(checkloaded)
}
</script>
<div class="picList" id="main" style="overflow: hidden; width: 470px; height: 125px; position: relative;" nowrap="true" onmouseover="clearInterval(interval01);" onmouseout="iniautoslide();">

<div id="f1" style="position: absolute; width: 470px; height: 125px; z-index: 10; left: 0px; top: 0px; display: block;">
<script>checkdamie(1);</script>
<ul>
<li><a href="http://bbs3.news.163.com/board/rep.jsp?b=photo&amp;i=1958952"><img src="http://cimg2.163.com/cnews/2007/1/2/2007010212071236fe0.jpg" alt="网吧惊现美女作陪上网" border="0" height="80" width="130"></a>
<h5><a href="http://bbs3.news.163.com/board/rep.jsp?b=photo&amp;i=1958952">网吧惊现美女作陪上网</a></h5>
</li>
<li><a href="http://bbs3.news.163.com/board/rep.jsp?b=photo&amp;i=1960457"><img src="http://cimg2.163.com/cnews/2007/1/2/200701021205124851d.jpg" alt="盘点06中国十大疯子" border="0" height="80" width="130"></a>
<h5><a href="http://bbs3.news.163.com/board/rep.jsp?b=photo&amp;i=1960457">盘点06中国十大疯子</a></h5>
</li>
<li><a href="http://bbs3.news.163.com/board/rep.jsp?b=photo&amp;i=1956779"><img src="http://cimg2.163.com/cnews/2007/1/1/2007010111201618644.jpg" alt="北大女生PK金庸" border="0" height="80" width="130"></a>
<h5><a href="http://bbs3.news.163.com/board/rep.jsp?b=photo&amp;i=1956779">北大女生PK金庸</a></h5>

</li>
</ul>
</div>
<div id="f2" style="display: block; position: absolute; width: 470px; height: 125px; z-index: 10; left: 0px; top: 125px;">
<script>checkdamie(2);</script>
<ul>
<li><a href="http://bbs.news.163.com/board/rep.jsp?b=mil&amp;i=1215341"><img src="http://220.181.29.172/boardfile/banzhu/20071/20070101222659.jpg" alt="世界十大反恐怖部队" border="0" height="80" width="130"></a>
<h5><a href="http://bbs.news.163.com/board/rep.jsp?b=mil&amp;i=1215341">世界十大反恐怖部队</a></h5>
</li>
<li><a href="http://bbs.news.163.com/board/rep.jsp?b=mil&amp;i=1211328"><img src="http://220.181.29.172/boardfile/banzhu/20071/20070101222155.jpg" alt="中国陆海空军衔大全" border="0" height="80" width="130"></a>
<h5><a href="http://bbs.news.163.com/board/rep.jsp?b=mil&amp;i=1211328">中国陆海空军衔大全</a></h5>
</li>

<li><a href="http://bbs.news.163.com/board/rep.jsp?b=mil&amp;i=1214486"><img src="http://220.181.29.172/boardfile/banzhu/20071/20070101084328.jpg" alt="06年军事演习精华回顾" border="0" height="80" width="130"></a>
<h5><a href="http://bbs.news.163.com/board/rep.jsp?b=mil&amp;i=1214486">06年军事演习精华回顾</a></h5>
</li>
</ul>
</div>
<div id="f3" style="display: block; position: absolute; width: 470px; height: 125px; z-index: 10; left: 0px; top: 250px;">
<script>checkdamie(3);</script>
<ul>
<li><a href="http://bbs6.news.163.com/board/rep.jsp?b=happy&amp;i=1092823"><img src="http://cimg2.163.com/cnews/2007/1/2/20070102124423facca.jpg" alt="艺术品一样的女性用品" border="0" height="80" width="130"></a>
<h5><a href="http://bbs6.news.163.com/board/rep.jsp?b=happy&amp;i=1092823">艺术品一样的女性用品</a></h5>
</li>
<li><a href="http://bbs6.news.163.com/board/rep.jsp?b=happy&amp;i=1129887"><img src="http://cimg2.163.com/cnews/2007/1/2/2007010212425378300.jpg" alt="非常酷的书包" border="0" height="80" width="130"></a>

<h5><a href="http://bbs6.news.163.com/board/rep.jsp?b=happy&amp;i=1129887">非常酷的书包</a></h5>
</li>
<li><a href="http://bbs6.news.163.com/board/rep.jsp?b=happy&amp;i=1125699"><img src="http://cimg2.163.com/cnews/2007/1/1/20070101113335b27a0.jpg" alt="见到美女时的经典表情" border="0" height="80" width="130"></a>
<h5><a href="http://bbs6.news.163.com/board/rep.jsp?b=happy&amp;i=1125699">见到美女时的经典表情</a></h5>
</li>
</ul>
</div>
</div>
<script language="JavaScript">
<!--
var currentF=1;
document.getElementById("upbtn").style.display="none";
var mainobj = document.getElementById("main");
var frameheight =125;
var scrolling=0;
var speed = 20;
function alertloading(sdirection){
scrolling=0;
if(sdirection == "down"){
currentF--;
}
else{
currentF++;
}
}
function scrolldown(f){
        switch (f){
        case 2:
        if (mainobj.scrollTop>=frameheight){
                clearInterval(inter);
                mainobj.scrollTop=frameheight;
                scrolling=0;
                }
        else{mainobj.scrollTop+=speed;}
        break;
        case 3:
        if (mainobj.scrollTop>=frameheight*2){
                mainobj.scrollTop=frameheight*2;
                clearInterval(inter);
                scrolling=0;
                }
        else{mainobj.scrollTop+=speed;}
        break;
        }
}
function scrollup(f){
        switch (f){
        case 1:
        if (mainobj.scrollTop<=0){
                clearInterval(inter1);
                mainobj.scrollTop=0;
                scrolling=0;
                }
        else{
        mainobj.scrollTop-=speed;
        }
        break;
        case 2:
        if (mainobj.scrollTop<=frameheight){
                mainobj.scrollTop=frameheight;
                clearInterval(inter1);
                scrolling=0;
                }
        else{
        mainobj.scrollTop-=speed;
        }
        break;
        }
}
function slidedown(){
if (scrolling==0){
        scrolling=1;
        currentF++;
        obj=eval("document.getElementById('f"+currentF+"')");
        obj.style.display="block";
        if (checkloaded==1){
                inter=eval("setInterval('scrolldown("+currentF+")',5)");
                document.getElementById("upbtn").style.display="";
                if (currentF==3){
                document.getElementById("downbtn").style.display="none";
                }
                for (i=1;i<=3;i++){
                eval("document.getElementById('led"+i+"').className='num1'");
                }
                eval("document.getElementById('led"+currentF+"').className='num2'");
        }
        else{
        alertloading("down");
       
        }
        }
}
function slideup(){
        //slide
if (scrolling==0){
        scrolling=1;
        currentF--;
        obj=eval("document.getElementById('f"+currentF+"')");
        obj.style.display="block";
                if (checkloaded==1){
                inter1=eval("setInterval('scrollup("+currentF+")',5)");
                //led
                document.getElementById("downbtn").style.display="";
                if (currentF==1){
                document.getElementById("upbtn").style.display="none";
                }
                for (i=1;i<=3;i++){
                eval("document.getElementById('led"+i+"').className='num1'");
                }
                eval("document.getElementById('led"+currentF+"').className='num2'");
                }
                else{
                alertloading("up");
                }
        }
}
//auto slide
var direction = "down";
var interval01;
var autotime = 8000;
function autoslide(){
        if(direction == "down"){
                if (currentF == 2){
               direction = "up";
                }
        slidedown();
        }
        if(direction == "up"){
                if (currentF == 2){
               direction = "down";
                }
        slideup();
        }
       
}
function iniautoslide(){
interval01 = setInterval("autoslide()",autotime);
}
//-->
</script>
</div>

wbws 发表于 2007 年 1 月 2 日 23:49:53

不错,就是这个
不过要改写下

lictor 发表于 2007 年 1 月 2 日 23:51:18

楼上的FF好像不能用:(

linxicn 发表于 2007 年 1 月 3 日 00:01:59

flash不就很简单实现了吗?
你要是不闲麻烦的话
用fireworks也可以轻松实现啊

lictor 发表于 2007 年 1 月 3 日 19:36:07

用fireworks如何轻松实现啊
页: [1] 2
查看完整版本: 如何写图片广告上下翻动的代码?