http://profile.163.com/love/tingting66515左下角那种,当我希望是要每行显示4~5张,点击按钮后滚动一格,以前在一些网站上看到过的

解决方案 »

  1.   

    <table border="0" cellpadding="0">
    <caption><strong>图片播放器</strong></caption>
    <tr>
    <td width="100%"><img src="./image/first.gif" width="300" height="240" name="photoslider"></td>
    </tr>
    <tr>
    <td width="100%"><form method="POST" name="rotater">
    <div align="center"><center><p><script language="JavaScript1.1">
    var photos=new Array()
    var which=0photos[0]="images/1.gif"
    photos[1]="images/2.gif"
    photos[2]="images/3.gif"
    photos[3]="images/4.gif"
    photos[4]="images/5.gif"
    function backward(){
    if (which>0){
    window.status=''
    which--
    document.images.photoslider.src=photos[which]
    }
    }function forward(){
    if (which<photos.length-1){
    which++
    document.images.photoslider.src=photos[which]
    }
    else window.status='End of gallery'
    }
      </script><input type="button" value="上一张" name="B2"
    onClick="backward()"> <input type="button" value="下一张" name="B1"
    onClick="forward()"><br>
    <a href="#" onClick="which=1;backward();return false">重新开始</a></p>
    </center></div>
    </form>
    </td>
    </tr>
    </table>
      

  2.   

    http://www.blueidea.com/bbs/NewsDetail.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8&DaysPrune=0&lp=2&id=1272338
      

  3.   

    用JavaScript实现图片翻滚特效
    (作者:周庆 2002年05月17日 09:20)
    如果你有两张或更多一样大的静态图片,你打算如何让它们在网页中显示,如果逐一添加到网页中,图片将比较呆板没有什么效果。如果把多张图片合并成GIF文件再显示又比较麻烦。下面给你介绍一种好办法,该方法可以翻滚显示图片,即增强了页面的动态的效果,又节省了页面的空间,何乐而不为!点击此处看效果方法如下:
    1、把如下代码加入<head>区域中。<script>
    <!--//
    //定义图片的宽度和高度,所有的图片要有相同的尺寸;
    var imgwidth=400
    var imgheight=60
    //下面定义了包含2个图片的数组,数组的下标从0开始,
    你可以增加任意的图片,按照顺序增加即可,注意相应增加数组下标。
    图片的位置及文件名可以自行修改。
    var imgname=new Array()
    imgname[0]="1.jpg"
    imgname[1]="2.jpg"
    //下面定义图片的超链接,如果不需要url,将连接值设置为"#";
    var imgurl=new Array()imgurl[0]="http://www.sohu.com"
    imgurl[1]="#"// 先预读图片,不要修改这里;
    var imgpreload=new Array()
    for (i=0;i<=imgname.length-1;i++) {
    imgpreload[i]=new Image()
    imgpreload[i].src=imgname[i]
    }
    var pause=2000//图片的显示速度,数值小速度快;
    var speed=20//下面的参数也会影响图片显示的速度,数值小速度快;代表2个图片的显示间隔。
    var step=10//下面的代码无需;
    var i_loop=0
    var i_image=0
    function stretchimage() {
    if (i_loop<=imgwidth) {
    if (document.all) {
    imgcontainer.innerHTML="<a href='"+imgurl[i_image]
    +"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
    }
    i_loop=i_loop+step
    var timer=setTimeout("stretchimage()",speed)
    }
    else {
    i_loop=imgwidth
    clearTimeout(timer)
    imgcontainer.innerHTML="<a href='"+imgurl[i_image]
    +"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>"
    var timer=setTimeout("shrinkimage()",pause)
    }
    }function shrinkimage() {
    if (i_loop>=0) {
    if (document.all) {
    imgcontainer.innerHTML="<a href='"+imgurl[i_image]
    +"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
    }
    i_loop=i_loop-step
    var timer=setTimeout("shrinkimage()",speed)
    }
    else {
    i_loop=0
    clearTimeout(timer)
    changeimage()
    }
    }function changeimage() {
    i_image++
    if (i_image>=imgname.length) {i_image=0}
    if (document.layers) {
    document.imgcontainer.document.write("<a href='"
    +imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")
    document.imgcontainer.document.close()
    }
    stretchimage()
    }
    // -->
    </script>
    <style>
    .containerstyle {
    position:absolute;
    left:100px;
    top:10px;
    }
    </style>
     2、把如下代码加入<body>区域中。
    <span id="imgcontainer" class="containerstyle"></span> 3、把<body>区中的内容发言为:
    <body bgcolor="#ffffff" onLoad="stretchimage()"> 注:图片其实是置于层中的,图片显示的位置即是层的位置,可以在Dreamweaver中拖动层来调节图片显示的位置。