js+css 求一个有缩略图，翻页，自动翻页效果的代码

js+css  求一个有缩略图，翻页，自动翻页效果的代码 效果如下：
http://piclib.pcauto.com.cn/cars/image/343205-1.html#id=87
 但是这个 太复杂了，js也多。这方面我改不了。求各位大虾 帮我重写一个。谢谢了。越简单越好。或者帮我把这代代码改成那种效果(也就是加上点击大图翻页，第一页点击上一页的时候从最后一个开始，点击最后一页的时候从第一个开始)的也可以<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   .sss{
   filter:alpha(opacity=30);
   border:#000000 solid 1px;
   }
  </style>
</head>
<body style="background-color:#FBF9FA; margin:0px 0px 0px 0px;">
<div style="width:975px; height:620px; color:#fff;">
    <div id="aaa">
        <ul style="margin:0px;width:975px; padding:0px; list-style-type:none;">
            <li style="float:left; width:45px;">
                <img src="images/nextlef.jpg" style="cursor:pointer;" id="pre"/>
            </li>
            <li style="float:left; width:885px;">
                <div id="con_one_1" style=" width:885px;">
                    <img src="images/01.jpg" />
                </div>
                <div id="con_one_2" style="width:885px; display:none;">
                    <img src="images/02.jpg" />
                </div>
                <div id="con_one_3" style="width:885px; display:none;">
                    <img src="images/03.jpg" />
                </div>
                <div id="con_one_4" style="width:885px; display:none;">
                    <img src="images/04.jpg" />
                </div>
            </li>
            <li style="float:left; width:40px;">
                <img src="images/nextright.jpg" style="cursor:pointer;" id="next" />
            </li>
        </ul>
    </div>
    <div id="sy" style="text-align:center; margin-top:20px; ">
        <ul style="margin:0px;width:885px; padding:0px; list-style-type:none;">
            <li style="float:left; margin-left:10px;">
                <img src="images/1.jpg" ac="1" style="cursor:pointer;border:#B6E6FB solid 1px;"  />
            </li>
            <li style="float:left; margin-left:10px;">
                <img src="images/2.jpg"  ac="2" style="cursor:pointer;border:#B6E6FB solid 1px;" class="sss"  />
            </li>
            <li style="float:left; margin-left:10px;">
                <img src="images/3.jpg"  ac="3" style="cursor:pointer;border:#B6E6FB solid 1px;" class="sss"  />
            </li>
            <li style="float:left; margin-left:10px;">
                <img src="images/4.jpg"  ac="4" style="cursor:pointer;border:#B6E6FB solid 1px;" class="sss"  />
            </li>
        </ul>
    </div>
</div>
  <script type="text/javascript" language="javascript">
  var $=function(id){return document.getElementById(id);}
   var test=0;
var imgs=$("sy").getElementsByTagName("img");
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].onmouseover=function(){
for(var j=0,len2=imgs.length;j<len2;j++){
if(this.getAttribute('ac')==imgs[j].getAttribute("ac")){
$("con_one_"+imgs[j].getAttribute('ac')).style.display="block";
imgs[j].className="";
//RemoveClass
test=j;
}else{
$("con_one_"+imgs[j].getAttribute('ac')).style.display="none";
imgs[j].className="sss";
}
}
};
}//切换 $("pre").onclick=function(){
imgs[test-1].onmouseover.call(imgs[test-1]);
};
$("next").onclick=function(){
imgs[test+1].onmouseover.call(imgs[test+1]);
}; //上一张.下一张 (function auto(){
var s=test+1;
if(s>imgs.length){
s=0;
}

imgs[s].onmouseover.call(imgs[s]);
setTimeout(arguments.callee,10000);
})();//自动切换


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

解决方案 »

  1.   

    //Demo1:
    $(function(){
         var len = $("#idNum > li").length;
    var index = 0;
    $("#idNum li").mouseover(function(){
       index =   $("#idNum li").index(this);
       showImg(index);
    }); 
    //滑入 停止动画，滑出开始动画.
    $('#idTransformView').hover(function(){
         if(MyTime){
         clearInterval(MyTime);
         }
    },function(){
         MyTime = setInterval(function(){
           showImg(index)
         index++;
         if(index==len){index=0;}
         } , 2000);
    });
    //自动开始
    var MyTime = setInterval(function(){
       showImg(index)
       index++;
       if(index==len){index=0;}
    } , 2000);
    })
    // Demo1 : 关键函数：通过控制top ，来显示不通的幻灯片
    function showImg(i){
       $("#idSlider").stop(true,false).animate({top : -168*i},800);
       $("#idNum li")
        .eq(i).addClass("on")
        .siblings().removeClass("on");
    }
    <div class="container" id="idTransformView">
    <ul class="slider" id="idSlider">
        <li><img src="images/tu_2.jpg"/></li>
        <li><img src="images/tu_2.jpg"/></li>
        <li><img src="images/tu_2.jpg"/></li>
    <li><img src="images/tu_2.jpg"/></li>
    <li><img src="images/tu_2.jpg"/></li>
    </ul>
    <ul class="num" id="idNum">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </div>.container, .container * { margin:0; padding:0; }
    .container { width:408px; height:168px; overflow:hidden; position:relative; }
    .slider { position:absolute; }
    .slider li { list-style:none; display:inline; }
    .slider img { width:408px; height:168px; display:block; }
    .slider2 { width:2000px; }
    .slider2 li { float:left; }
    .num { position:absolute; right:5px; bottom:5px; }
    .num li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff; }
    .num li.on { color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; }
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        
        <title>无标题页</title>
        <script type="text/javascript" src="http://www.gldcw.com/scripts/preview_photo.js"></script>
    <style type="text/css">
    /*照片查看*/.bg{ width:100%;}
    .preview{ width:90%; margin:0 auto; padding-top:40px; padding-bottom:20px; border:1px solid #ddd;  margin-top:20px; _margin-top:30px; margin-bottom:20px}
    .preview .view{ width:720px; position:relative; height:500px; background:url(../images/loading.gif) no-repeat center center; margin:0 auto}
    .preview .view img{  width:720px; height:500px; cursor:pointer }
    .preview .message{ height:30px; width:720px; line-height:30px; margin-bottom:8px; padding-left:5px ; padding-right:5px; margin:0 auto}
    .preview .message .left{ float:left;}
    .preview .message .right{ float:right;}
    .preview .message .left span{ padding-right:10px; color: #666}
    .preview .message .right span{ color: #f30}.preview .control{ height:120px; width:720px;background:#f9f9f9; margin:0 auto;}
    .preview .control .curr{ width:640px; height:100px; margin:0 auto;}
    .pre div,.next div{ width:100px; height:100px; margin: 0 auto}
    .pre div img,.next div img{ width:95%; height:70px; display:block; margin:0 auto; }
    .pre div p,.next div p{ width:95%; overflow:hidden; height:22px; text-align:center; line-height:22px; padding-top:2px}
    .preview .control .curr .premove{ width:50px; height:100px; float:left; }
    #premove,#nextmove{ display:block; margin:0 auto; margin-top:15px; cursor:pointer}
    .preview .control .curr .wrap{ width:530px; height:100px; float:left;overflow:hidden; position:relative}
    .preview .control .curr .nextmove{ width:50px; height:100px; float:left; }
    .preview .control .curr .wrap .inner{}
    .preview .control .curr .wrap .inner ul{ margin-top:10px;}
    .preview .control .curr .wrap .inner ul li{ width:105px; height:80px; float:left; background:url(../images/loading.gif) no-repeat 35px 20px;}
    .preview .control .curr .wrap .inner img{ width:93px; height:100%; margin:0 auto; display:block; cursor:pointer; border:1px solid #656565; position:relative}
    .preview .control .curr .wrap .inner img.current{width:93px; height:100%; margin:0 auto; display:block; cursor:pointer; border:1px solid #638382}
    .pull{ width:530px; margin:0 auto; position:relative; height:15px;}
    .pull .pull-bar{ width:200px; position:absolute; left:0; top:0}
    .pull .pull-center{ display:inline-block; background:url(../images/preview/pull-bg.png) repeat-x; width:100%; height:15px;}
    .pull .pull-center .center{ position:absolute; left:93px;  top:0}
    </style>
    </head>
    <body>    <div class="cArea">        <div class="bg">
                <div class="preview" id="photoPreview">
                    <div class="view" id="view">
                        <img src="" id="preview" name="preview" />
                    </div>
                    <div class="message">
                        <div class="left">
                            图片名称：<span id="imgName"></span> 所属相册：<span id="author"></span> 上传时间：<span id="time"></span>                    </div>
                        <div class="right">
                            第<span id="currentPage"></span> 张 &nbsp; 共<span id="all"></span> 张
                        </div>
                    </div>
                    <div class="control">                    <div class="curr">
                            <div class="premove">
                                <img src="../images/preview/pre_1.png" name="premove" id="premove" />
                            </div>
                            <div class="wrap" id="wrap">
                                <div class="inner" id="inner">
                                    <ul>
                                    </ul>
                                    <div class="clear">                                </div>
                                </div>
                            </div>
                            <div class="nextmove">
                                <img src="../images/preview/next_1.png" name="nextmove" id="nextmove" />
                            </div>
                            <div class="clear">
                            </div>
                            <div class="pull" id="pull">                            <div class="pull-bar" id="pullbar" name="pullbar">
                                    <span class="pull-center">
                                        <img src="../images/preview/pull-left.png" style="background: #FFF; float: left" />
                                        <img src="../images/preview/pull-center.png" class="center" />
                                        <img src="../images/preview/pull-right.png" style="background: #FFF; float: right" />
                                    </span>
                                </div>
                            </div>
                        </div>                    <div class="clear">
                        </div>
                    </div>
                </div>
            </div>
        </div>    <script type="text/javascript">
        var collection = [
    {name:"集体照",uploadTime:"2011-4-26",src:"ba1d0cb7e50841b79d3c76e62e257ed2.jpg"},
    {name:"集体照",uploadTime:"2011-4-26",src:"e4ae03ab570048dda1d90ba7a6490fd6.jpg"},
    {name:"集体照",uploadTime:"2011-4-26",src:"ad0d5263d30f465d907d3d6293bcfc3b.jpg"},
    {name:"集体照",uploadTime:"2011-4-26",src:"480bb006792248e0add826e697ebb5ac.jpg"}
    ]
        var lister = document.getElementById("inner").getElementsByTagName("ul")[0]
        var oPreview = new PhotoPreview("xxxxx");
        oPreview.collection = collection;
        oPreview.photoPath = "../pictures/company/normal/";
        oPreview.thumbsPath = "../pictures/company/130x100/130_100-"               
        oPreview.write(lister)
        </script></body>
    </html>
      

  3.   

    http://cd.qq.com/a/20110529/000063.htm#p=1 类似这种也可以