佛山信息港相册效果
http://www.fs12345.com/album/photo.asp?id=171

解决方案 »

  1.   

    div+js, 源文件中直接扒不就得了,怎么扒了一晚上呢???汗!!
      

  2.   

    全部JS文件路径和JS  收工,接分~~
    http://www.fs12345.com/album/slider/slider_extras.js
    http://www.fs12345.com/js/function.js
    http://www.fs12345.com/js/TransformView.js
    function Scale(){
    var img = $("idImg");

    var maxWidth = 600;
    if(img.width > maxWidth){ ScalePhoto(img, maxWidth, 2000); }
    img.style.visibility = "visible";

    $("idPhotoLeft").style.height = $("idPhotoRight").style.height = img.height + "px";
    $("idPhotoMid").style.width = img.width + "px";
    }$("idPhotoLeft").onclick = function(){
    _Index--;
    _fun();
    }$("idPhotoRight").onclick = function(){
    _Index++;
    _fun();
    }
    var arrPic = [];arrPic.push({ id: 175, url: '/upphoto/wzy17/86e0ba6e-e14a-4c27-97aa-46466d8429fd.jpg' })arrPic.push({ id: 174, url: '/upphoto/wzy17/2462a961-725d-4a8e-b9fc-19cecf36c260.jpg' })arrPic.push({ id: 173, url: '/upphoto/wzy17/cf42bd4b-c907-48f8-8885-8cb17e8202a4.jpg' })arrPic.push({ id: 172, url: '/upphoto/wzy17/16f7c78e-4deb-4cc1-a0b3-fbddc86b5e7e.jpg' })arrPic.push({ id: 171, url: '/upphoto/wzy17/b90e9df3-c6cc-4eaf-83ef-0945bc4a4cca.jpg' })arrPic.push({ id: 170, url: '/upphoto/wzy17/9db5bb03-1daa-466e-b8a2-f3007fef90c2.jpg' })arrPic.push({ id: 169, url: '/upphoto/wzy17/5a71bed2-1d27-449b-bb0b-83b28df81615.jpg' })arrPic.push({ id: 168, url: '/upphoto/wzy17/c504983d-58cd-409f-b682-2ad34f8ad980.jpg' })arrPic.push({ id: 167, url: '/upphoto/wzy17/768b548a-165e-467c-adff-d0ff9efaea80.jpg' })arrPic.push({ id: 166, url: '/upphoto/wzy17/39a50e30-1370-4366-a42f-5ee7703a63ea.jpg' })arrPic.push({ id: 165, url: '/upphoto/wzy17/440da876-a797-43a8-8e8b-e7e7885fb72d.jpg' })arrPic.push({ id: 164, url: '/upphoto/wzy17/110e80b0-eef8-400c-ab03-8719236bff4d.jpg' })arrPic.push({ id: 163, url: '/upphoto/wzy17/61f60c88-8730-45ed-b150-8dd5ea4ce1bd.jpg' })arrPic.push({ id: 162, url: '/upphoto/wzy17/37c2e6a7-630f-432c-83ee-1d2f8d481e70.jpg' })arrPic.push({ id: 161, url: '/upphoto/wzy17/bab79a64-fc9e-4e97-8615-e3bd4bea1b97.jpg' })arrPic.push({ id: 160, url: '/upphoto/wzy17/40c42e19-5013-4e6e-9cd4-4d44a652e7d8.jpg' })
    var len = arrPic.length;
    var mid = 3;var _Index = 0;
    var _id = 171;
    var _fun = function(){
    if(_Index < 0){ _Index = len - 1; }
    else if(_Index + 1 > len){ _Index=0; }

    ShowPic(arrImg[_Index]._id, _Index);
    ShowImg(arrImg[_Index]);
    SetSlider();
    };
    var arrImg = [];
    var frag = document.createDocumentFragment();
    Each(arrPic, function(o, i){
    var img = document.createElement("img");
    img.src = o.url;
    img._id = o.id;
    img.onclick = function(){
    _Index = i;
    _fun();
    }

    if(o.id == _id){ _Index = i; }

    frag.appendChild(img);
    arrImg.push(img);
    });
    $("idSlider").innerHTML = ""
    $("idSlider").appendChild(frag);function ShowImg(img){
    Each(arrImg, function(o, i){ o.className = ""; });
    img.className = "on";
    }
    var tv = new TransformView("idTransformView", "idSlider", 100, len, { Up: false });
    var Cache = [];function ShowPic(id, index){
    //ShowList(index);

    var oInfo;

    Each(Cache, function(o){ if(o.id == id){ oInfo = o.info; } })

    if(oInfo){
    ShowInfo(oInfo);
    } else {
    ajax("get.asp?id=" + id, function(s){
    var oInfo = eval("("+s+")");
    Cache.push({"id": id, "info": oInfo });
    ShowInfo(oInfo);
    });
    }
    }function ShowInfo(oInfo){
    if(oInfo.finish){
    $("idTitle").innerHTML = oInfo.title;
    $("idDetail").innerHTML = oInfo.detail;
    $("idAddtime").innerHTML = oInfo.addtime;
    $("idHits").innerHTML = oInfo.hits;
    $("idSize").innerHTML = oInfo.psize;


    var img = $("idImg");
    img.style.visibility = "hidden";
    img.style.width = img.style.height = "";
    img.onload = Scale;
    img.src = oInfo.path;
    } else { alert(oInfo.msg) }
    }
    //展示
    function ShowList(index){
    if(len>6){
    if(index < mid){ index = mid; }
    else if(index > mid && len - mid - 1 < index){ index = len - mid; }
    tv.Index = index - mid;
    } else {
    tv.Index = 0;
    }
    tv.Start();
    }$("idAuto").onclick = function(){
    $("idAuto").style.display = "none";
    $("idCancel").style.display = "";
    Auto();
    }$("idCancel").onclick = function(){
    $("idAuto").style.display = "";
    $("idCancel").style.display = "none";
    Cancel();
    }var _timer = null;function Auto(){
    _timer = setTimeout(function(){
    _Index++;
    _fun();
    Auto();
    }, 3000);
    }function Cancel(){
    clearTimeout(_timer);
    }
    //////////////////////////////////////////////
    var maxSlider = 10000;
    var winSlider = new neverModules.modules.slider(
    {targetId: "sliderDemo3",
    sliderCss: "winSlider",
    barCss: "winBar",
    min: 0,
    max: maxSlider,
    hints: "move the slider"
    });winSlider.onchange = function () {
    ShowList(parseInt(winSlider.getValue()/maxSlider*len));
    };
    winSlider.create();function SetSlider(){
    winSlider.setValue(_Index/len * maxSlider);
    }var w_slider = 600;var s = 6 / len;
    s > 1 && (s = 1);var w_bar = s * w_slider;
    w_bar < 10 && (w_bar = 10);winSlider._slider.style.width = w_slider + "px";
    winSlider._bar.style.width = w_bar + "px";
    var _d1 = document.createElement("DIV");
    var _d2 = document.createElement("DIV");_d1.className = "winBar_left";
    _d2.className = "winBar_right";winSlider._bar.appendChild(_d1);
    winSlider._bar.appendChild(_d2);/////////////////////////////////////////////////////////////////_fun();