如何实现点击后在网页中换图片

有两个栏目,分别是类别和此类别下的具体图片,如何点击某一个类后图片换成此类别的图？            摄影  动漫
      摄影图A   摄影图B  摄影图C  摄影图D              ↓点击动漫后
              ↓
              ↓
              ↓
            摄影  动漫
     动漫图A    动漫图B   动漫图C  动漫图D

解决方案 »

  1.   

    补充一下,类似百度图片那样的换图就行,不过我是需要换一片图片
    http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%BA%A3%D4%F4%CD%F5&in=23181%20%20%20%20%20&cl=2&lm=-1&st=-1&pn=3&rn=1&di=47022459150&ln=1982&fr=&fm=index&fmq=1351332085422_R&ic=&s=&se=&sme=0&tab=&width=&height=&face=&is=&istype=2#pn8&-1&di266956029200&objURLhttp%3A%2F%2Fimg.kumi.cn%2Fphoto%2Fc8%2F3c%2F23%2Fc83c23169e5bdc86.jpg&fromURLhttp%3A%2F%2Ftu.kumi.cn%2Fk%2F123-39162-1-435.html&W1024&H768&T7589&S154&TPjpg
      

  2.   

    在看jquery的时候发现使用$("img.fisrt").attr("src","路径"),可以一张图一张图的改变
    有更方便的方法吗,比如一次改变N张图？
      

  3.   

    A.把图片存在不同的JS数组中.点击不同类别,就循环不同数组来批量更换图片.
    B.用AJAX即时取不同类别的图片.这样可以取到刚更新过的最新结果.
      

  4.   

    <html>
    <head>
    <style>
    .caocao{
    -moz-transForm: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    }
    </style>
    <script type="text/javascript" src="./jquery-1.8.0.js"></script>
    <script>
    var moveLengthLeft = 0;
    var moveLengthTop = 0; var actionST = 0;  var timeInterval = 150; var pic = 0;  function action()
    { 
    var pic1 = "./pic2.png";
    var pic2 = "./pic3.png";
    var pic3 = "./pic1.png";
    var actionArray = [pic1, pic2, pic3]; var doc = document.getElementById("ID_IMG_CAOCAO");  if (pic == actionArray.length - 2){ 
    pic = 0; 
    }else{ 
    pic += 1; 
    }  if(pic > 2){
    pic = 2;
    doc.src = "./pic1.png"
    }

    doc.src = actionArray[pic];
    } function walk()
    {
    setInterval(action, timeInterval); for(var i = 0; i < 100; i++){
    $("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
    actionST ++; if(actionST == 100){
    standCaocao();
    }
    }); //在动画做完时调用callback。callback里可以放函数。 $("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10); moveLengthLeft += 2;
    moveLengthTop += 1;
    }
    } function standCaocao()
    {
    pic = 2;
    }
    </script>
    </head>
    <body onLoad="walk()">
    <div style="border:10px solid green; width:250px; height:200px; background-color:lightblue;">
    <img src="./pic1.png" id="ID_IMG_CAOCAO" style="margin-top:0px; margin-left:10px" class="caocao"/>
    </div>
    </body>
    </html>