图片一组显示,但是点击向前,向后,按钮可以向前切换,点击向后,或者点击图片,则随后跟着显示下一张图片,具体特下如下:
请大家帮忙,谢谢!
http://www.displayitinc.com/about-us/如同上面网址上点击图片上的人物,会显示不同的人物

解决方案 »

  1.   


    lz  事项要实现上的效果还是    每太听明白lz的意思
      

  2.   

    正好看到这个 在《jQuery基础教程》源代码里边有个书店的网站,在浏览图书的时候用的就是这个效果,楼主自己下载找下看看
      

  3.   

    我没有用jquery,用的是js,现在只能做到如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head><body>
    <div><input type="button" name="up" value="up" onClick="up();"><li id="ss"><img src="../img/1.jpg"  name="photos"></li>
     <input type="button" name="down" value="down" onclick="down()"></div>
     
     <input type="button" value="test" onClick="ss()">
    </body>
    </html>
    <script language="javascript">
    var j=0;
    var i=0;var arr=new Array("../img/1.jpg","../img/ALBUM_BANNER.jpg","../img/ballon.gif");
    function down()
    {
     if(j==0)
     {
      i++;
      if(i>arr.length-1)
      {
       i=0;
      }
     }
    mm=document.getElementById("ss");
    text=mm.innerHTML;
    mm.innerHTML=text+"<img src="+arr[i]+">";
    }
    function up()
    {
    if(j==0)
    {
     i--;
     if(i<0)
     {
      i=arr.length-1;
     }
    }
    document.photos.src=arr[i];
    }
    </script>
      

  4.   

    JQuery版的切换图片
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
        <script type="text/javascript">
            var arr=new Array("351.jpg","392.jpg","413.jpg","401.jpg","262.jpg","68.jpg");
            var currentIndex=-1;//存放当前所看的图片索引,初始化为-1
            var direction=1;//往后看
            var arrLength=arr.length;//总的图片张数
            function move()
            {
               currentIndex=(currentIndex+direction+arrLength)%arrLength;//计算当前要显示图片的索引
               $("#photos").attr("src",arr[currentIndex]);//加载该图片
            }
               
            $(function(){
               $("#photos").attr("src",arr[0]);//加载第一张图片
               $("#up").click(function(){direction=-1;move();});
               $("#photos,#down").click(function(){direction=1; move();});
            });
        </script>
        <title>图片切换</title>
    </head><body>
        <input type="button" id="up" value="up" />
        <img id="photos" />
        <input type="button" id="down" value="down" />
    </body>
    </html>
      

  5.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <style type="text/css">
         #container{position:absolute;left:200px;}
         li{position:relative;float:left;text-align:center;}
     ul{list-style-type:none;}
     .key{position:absolute; padding:10px;}
    </style><script></script>
    </head><body>
    <div id="container">
    <img src="key-left.gif" class="key" name="key" onclick="last()"/>
    <ul id="pic">
         <li><img src="a.jpg" width="150"/></li>
     <li><img src="b.jpg" width="150"/></li>
     <li><img src="c.jpg" width="150" /></li>
    </ul>
    <img src="key-right.gif" class="key" name="key" onclick="next()"/>
    <script>
        var keys=document.getElementsByName("key");
    var imgs=document.getElementById("pic").getElementsByTagName("img");
    imgs[2].style.display="none"; for(var j=0;j<keys.length;j++){
         keys[j].style.top=imgs[0].height/2+"px";
    }    function find(){
            for(var i=0;i<imgs.length;i++){
        if(imgs[i].style.display=="none"){
        return i;}
          }
       }    function last(){
      var result=find();
             if(result==0) {
          imgs[2].style.display="none";
      imgs[0].style.display="block";
      }}
      function next(){
        var result=find();
             if(result==2) {
          imgs[0].style.display="none";
      imgs[2].style.display="block";
      }

    </script>
    </div>
    </body>
    </html>
      

  6.   

    如果不太会,可以让后台程序员去做。女性相对工资低点,对能力的要求自然也不会太高。
    如果真想学的话,只能说你学得还不够努力,代码写得少,看你代码就能看出来。
    比如:
    text=mm.innerHTML;
    mm.innerHTML=text+"<img src="+arr[i]+">";常写的人都会写成:
    mm.innerHTML+="<img src="+arr[i]+">";
      

  7.   

    text=mm.innerHTML;
    mm.innerHTML=text+"<img src="+arr[i]+">";
      我这样写的原因是想记住前一张图片的内容啊
    常写的人都会写成:
    mm.innerHTML+="<img src="+arr[i]+">";
    谢谢你的指导,但是你不回答问题就算了,何必倚老卖老,打击别人
      

  8.   

    您何必这么激动?
    什么事情都是从会倒不会的一个过程
    反而你这种过激的表现,让人觉得郁闷
    你愿意怎么说就怎么说
    想浪费口舌就浪费吧
    whatever
      

  9.   

    text=mm.innerHTML;
    mm.innerHTML=text+"<img src="+arr[i]+">";常写的人都会写成:
    mm.innerHTML+="<img src="+arr[i]+">";
    ……、
    我写的那个代码功能是相同的
    你用的是高级的,
    我不会
    所以我尽量一步步写
    .....
    明白了,我也会慢慢来提高
    但是,你们那些 牛人根本就不顾新手的感觉
    ....只会对别人破骂一通
    然后一点思路都不给
    ....
      

  10.   

    呵呵,说得很委屈。
    但给你一个思路,你只是解决了这一个问题。有真正的提高吗?
    而随便从代码中就能印证性地指出你学习努力程度上还有所欠缺的不足,能根本地改变你,不仅过后能很轻松解决这种小CASE,还有更光明的无限未来可以用你的努力换来。女程序员适不适合做技术,能做多久,这些都是经常被讨论的话题,在你心里也必然有一些相关因素影响。所以我更要用我的观点来提醒你,无论是真正“男女平等”的现代意识也好,还是从古至今最朴素的做事原则也好,学技术和搞技术,就要忘记自己是男是女,除非你在谈对象。学习,不要有其它任何私心杂念,只要学,努力学,努力做,就是了。