JS 实现图片这种样效果的浏览!

我手上有做过一个相册程序，和你这个差不多，支持投票，EXIF信息读取，评论等，代码比较长，我就不贴了。要的站内短信我

解决方案 »

  1.   

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title> </title> 
    <script>
    var cur = 1;
    function show(n){
    cur = n;
    var index1 = n-1;
    var index2 = n+1;
    if(index1<0){
    index1 += 6;
    }
    if(index2>6){
    index2 -= 6;
    }
    var str = '<img src="http://www.csf.org.cn/test/images/spic0'+index1+'.jpg" alt="img" width="120" height="90" />';
    str += '<img src="http://www.csf.org.cn/test/images/spic0'+n+'.jpg" alt="img" width="360" height="270" hspace="40" align="absmiddle" />';
    str += '<img src="http://www.csf.org.cn/test/images/spic0'+index2+'.jpg" alt="img" width="120" height="90" />';
    document.getElementById("sss").innerHTML = str;
    }
    function prev(){
    cur--;
    if(cur<0){
    cur += 6;
    }
    show(cur);
    }
    function next(){
    cur++;
    if(cur>6){
    cur -= 6;
    }
    show(cur);
    }
    </script> 
    </head> 
    <body> 
    <table width="800" border="0" align="center" cellpadding="5" cellspacing="0" style="border:#CCCCCC 1px solid;">
      <tr>
        <td width="40" align="center" onClick="prev()"><img src="http://www.csf.org.cn/test/images/l.gif" alt="fw" width="17" height="17" /></td>
        <td align="center" valign="middle">
        <span id="sss"></span></td>
        <td width="40" align="center" onClick="next()"><img src="http://www.csf.org.cn/test/images/r.gif" alt="fw" width="17" height="17" /></td>
      </tr>
    </table>
    <br />
    <hr size="1" />
    <br />
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="133" align="center" onClick="show(0)"><img src="http://www.csf.org.cn/test/images/spic00.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /></td>
        <td width="133" align="center" onClick="show(1)"><img src="http://www.csf.org.cn/test/images/spic01.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /></td>
        <td width="133" align="center" onClick="show(2)"><img src="http://www.csf.org.cn/test/images/spic02.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /></td>
        <td width="133" align="center" onClick="show(3)"><img src="http://www.csf.org.cn/test/images/spic03.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /></td>
        <td width="133" align="center" onClick="show(4)"><img src="http://www.csf.org.cn/test/images/spic04.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /></td>
        <td width="135" align="center" onClick="show(5)"><img src="http://www.csf.org.cn/test/images/spic05.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /></td>
      </tr>
    </table>
    <br />
    <br />
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="70" onClick="prev()"><img src="http://www.csf.org.cn/test/images/l.gif" alt="fw" width="17" height="17" align="absmiddle" />上一页</td>
        <td width="20" onClick="show(0)">1</td>
        <td width="20" onClick="show(1)">2</td>
        <td width="20" onClick="show(2)">3</td>
        <td width="20" onClick="show(3)">4</td>
        <td width="20" onClick="show(4)">5</td>
        <td width="20" onClick="show(5)">6</td>
        <td width="70" onClick="next()"><img src="http://www.csf.org.cn/test/images/r.gif" alt="fw" width="17" height="17" align="absmiddle" />下一页</td>
      </tr>
    </table>
    <br /> 
    </body> 
    </html>
    <script>
    show(1);
    </script>
      

  2.   

    给一个例子你看看：<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title> </title>
    <script>
    var cur = 1;
    function show(n){
    cur = n;
    var index1 = n-1;
    var index2 = n+1;
    if(index1 <0){
    index1 = 5;
    }
    if(index2>5){
    index2 = 0;
    }
    var str = ' <img src="http://www.csf.org.cn/test/images/spic0'+index1+'.jpg" alt="img" width="120" height="90" />';
    str += ' <img src="http://www.csf.org.cn/test/images/spic0'+n+'.jpg" alt="img" width="360" height="270" hspace="40" align="absmiddle" />';
    str += ' <img src="http://www.csf.org.cn/test/images/spic0'+index2+'.jpg" alt="img" width="120" height="90" />';
    document.getElementById("sss").innerHTML = str;
    }
    function prev(){
    cur--;
    if(cur <0){
    cur = 5;
    }
    show(cur);
    }
    function next(){
    cur++;
    if(cur>5){
    cur = 0;
    }
    show(cur);
    }
    </script>
    </head>
    <body>
    <table width="850" border="0" align="center" cellpadding="5" cellspacing="0" style="border:#CCCCCC 1px solid;">
      <tr>
        <td width="40" align="center" onClick="prev()"> <img src="http://www.csf.org.cn/test/images/l.gif" alt="fw" width="17" height="17" /> </td>
        <td align="center" valign="middle">
        <span id="sss"> </span> </td>
        <td width="40" align="center" onClick="next()"> <img src="http://www.csf.org.cn/test/images/r.gif" alt="fw" width="17" height="17" /> </td>
      </tr>
    </table>
    <br />
    <hr size="1" />
    <br />
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="133" align="center" onClick="show(0)"> <img src="http://www.csf.org.cn/test/images/spic00.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /> </td>
        <td width="133" align="center" onClick="show(1)"> <img src="http://www.csf.org.cn/test/images/spic01.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /> </td>
        <td width="133" align="center" onClick="show(2)"> <img src="http://www.csf.org.cn/test/images/spic02.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /> </td>
        <td width="133" align="center" onClick="show(3)"> <img src="http://www.csf.org.cn/test/images/spic03.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /> </td>
        <td width="133" align="center" onClick="show(4)"> <img src="http://www.csf.org.cn/test/images/spic04.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /> </td>
        <td width="135" align="center" onClick="show(5)"> <img src="http://www.csf.org.cn/test/images/spic05.jpg" alt="img" width="120" height="90" style="border:#EBEBEB solid 1px;" /> </td>
      </tr>
    </table>
    <br />
    <br />
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="70" onClick="prev()"> <img src="http://www.csf.org.cn/test/images/l.gif" alt="fw" width="17" height="17" align="absmiddle" />上一页 </td>
        <td width="20" onClick="show(0)">1 </td>
        <td width="20" onClick="show(1)">2 </td>
        <td width="20" onClick="show(2)">3 </td>
        <td width="20" onClick="show(3)">4 </td>
        <td width="20" onClick="show(4)">5 </td>
        <td width="20" onClick="show(5)">6 </td>
        <td width="70" onClick="next()"> <img src="http://www.csf.org.cn/test/images/r.gif" alt="fw" width="17" height="17" align="absmiddle" />下一页 </td>
      </tr>
    </table>
    <br />
    </body>
    </html>
    <script>
    show(1);
    </script>