求帮修改代码，如何实现点击小图片出现大图片后，出现几个连接按扭

以下是在网下载的代码。怎么样修改，才能实现点击小图片出大图片后，出现几个连接按扭这是修改前效果
-----------------------------------------------------------------------------点击小图片前点击小图片后---------------------------------------------------------------------------------------
修改后想要的效果
------------------------------------------------------------------------------------------
点击小图片前点击小图片后----------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Full Page Image Gallery with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Full Page Image Gallery with jQuery - with scollable thumbnails and full screen preview" />
        <meta name="keywords" content="image gallery, jquery, full page, full screen, css3, auto scroll, scrollable, fancy, photography, portfolio"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
span.reference{
font-family:Arial;
position:fixed;
left:1px;
top:2%;
font-size:10px;
}
span.reference a{
color:#fff;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-left:20px;
}
span.reference a:hover{
color:#ddd;
} </style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
sliderLeft=$('#thumbScroller .container').position().left;
padding=$('#outer_container').css('paddingRight').replace("px", "");
sliderWidth=$(window).width()-padding;
$('#thumbScroller').css('width',sliderWidth);
var totalContent=0;
$('#thumbScroller .content').each(function () {
totalContent+=$(this).innerWidth();
$('#thumbScroller .container').css('width',totalContent);
});
$('#thumbScroller').mousemove(function(e){
if($('#thumbScroller  .container').width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType='easeOutCirc';
if(mouseCoords==destX){
$('#thumbScroller .container').stop();
}
else if(mouseCoords>destX){
//$('#thumbScroller .container').css('left',-thePosA); //without easing
$('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
}
else if(mouseCoords<destX){
//$('#thumbScroller .container').css('left',thePosB); //without easing
$('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
}
}
});
$('#thumbScroller  .thumb').each(function () {
$(this).fadeTo(fadeSpeed, 0.6);
});
var fadeSpeed=200;
$('#thumbScroller .thumb').hover(
function(){ //mouse over
$(this).fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
$(this).fadeTo(fadeSpeed, 0.6);
}
);
});
$(window).resize(function() {
//$('#thumbScroller .container').css('left',sliderLeft); //without easing
$('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
$('#thumbScroller').css('width',$(window).width()-padding);
sliderWidth=$(window).width()-padding;
});
</script>
    </head>    <body>
<div id="fp_gallery" class="fp_gallery">
<img src="images/1.jpg" alt="" class="fp_preview" style="display:none;"/>
<div class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#/"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#/"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#/"><img src="images/thumbs/3.jpg" alt="images/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#/"><img src="images/thumbs/4.jpg" alt="images/4.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#/"><img src="images/thumbs/5.jpg" alt="images/5.jpg" class="thumb" /></a></div>
</div>

</div>
</div>
</div>
<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
</div>
        <div>
            <span class="reference">
                <a href="#/>abcd</a>
 
            </span>
</div>

解决方案 »

  1.   


            <!-- The JavaScript -->        <script type="text/javascript">
                $(function() {
    //current thumb's index being viewed
    var current = -1;
    //cache some elements
    var $btn_thumbs = $('#fp_thumbtoggle');
    var $loader = $('#fp_loading');
    var $btn_next = $('#fp_next');
    var $btn_prev = $('#fp_prev');
    var $thumbScroller = $('#thumbScroller');

    //total number of thumbs
    var nmb_thumbs = $thumbScroller.find('.content').length;

    //preload thumbs
    var cnt_thumbs  = 0;
    for(var i=0;i<nmb_thumbs;++i){
    var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
    $('<img/>').load(function(){
    ++cnt_thumbs;
    if(cnt_thumbs == nmb_thumbs)
    //display the thumbs on the bottom of the page
    showThumbs(2000);
    }).attr('src',$thumb.find('img').attr('src'));
    }


    //make the document scrollable
    //when the the mouse is moved up/down
    //the user will be able to see the full image
    makeScrollable();

    //clicking on a thumb...
    $thumbScroller.find('.content').bind('click',function(e){
    var $content= $(this);
    var $elem  = $content.find('img');
    //keep track of the current clicked thumb
    //it will be used for the navigation arrows
    current  = $content.index()+1;
    //get the positions of the clicked thumb
    var pos_left  = $elem.offset().left;
    var pos_top  = $elem.offset().top;
    //clone the thumb and place
    //the clone on the top of it
    var $clone  = $elem.clone()
    .addClass('clone')
    .css({
    'position':'fixed',
    'left': pos_left + 'px',
    'top': pos_top + 'px'
    }).insertAfter($('BODY'));

    var windowW = $(window).width();
    var windowH = $(window).height();

    //animate the clone to the center of the page
    $clone.stop()
    .animate({
    'left': windowW/2 + 'px',
    'top': windowH/2 + 'px',
    'margin-left' :-$clone.width()/2 -5 + 'px',
    'margin-top': -$clone.height()/2 -5 + 'px'
    },500,
    function(){
    var $theClone  = $(this);
    var ratio = $clone.width()/120;
    var final_w = 400*ratio;

    $loader.show();

    //expand the clone when large image is loaded
    $('<img class="fp_preview"/>').load(function(){
    var $newimg  = $(this);
    var $currImage  = $('#fp_gallery').children('img:first');
    $newimg.insertBefore($currImage);
    $loader.hide();
    //expand clone
    $theClone.animate({
    'opacity' : 0,
    'top' : windowH/2 + 'px',
    'left' : windowW/2 + 'px',
    'margin-top' : '-200px',
    'margin-left' : -final_w/2 + 'px',
    'width' : final_w + 'px',
    'height' : '400px'
    },1000,function(){$(this).remove();});
    //now we have two large images on the page
    //fadeOut the old one so that the new one gets shown
    $currImage.fadeOut(2000,function(){
    $(this).remove();
    });
    //show the navigation arrows
    showNav();
    }).attr('src',$elem.attr('alt'));
    });
    //hide the thumbs container
    hideThumbs();
    e.preventDefault();
    });

    //clicking on the "show thumbs"
    //displays the thumbs container and hides
    //the navigation arrows
    $btn_thumbs.bind('click',function(){
    showThumbs(500);
    hideNav();
    });

    function hideThumbs(){
    $('#outer_container').stop().animate({'bottom':'-160px'},500);
    showThumbsBtn();
    } function showThumbs(speed){
    $('#outer_container').stop().animate({'bottom':'0px'},speed);
    hideThumbsBtn();
    }

    function hideThumbsBtn(){
    $btn_thumbs.stop().animate({'bottom':'-50px'},500);
    } function showThumbsBtn(){
    $btn_thumbs.stop().animate({'bottom':'0px'},500);
    } function hideNav(){
    $btn_next.stop().animate({'right':'-50px'},500);
    $btn_prev.stop().animate({'left':'-50px'},500);
    } function showNav(){
    $btn_next.stop().animate({'right':'0px'},500);
    $btn_prev.stop().animate({'left':'0px'},500);
    } //events for navigating through the set of images
    $btn_next.bind('click',showNext);
    $btn_prev.bind('click',showPrev);

    //the aim is to load the new image,
    //place it before the old one and fadeOut the old one
    //we use the current variable to keep track which
    //image comes next / before
    function showNext(){
    ++current;
    var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
    if($e_next.length == 0){
    current = 1;
    $e_next = $thumbScroller.find('.content:nth-child('+current+')');
    }
    $loader.show();
    $('<img class="fp_preview"/>').load(function(){
    var $newimg  = $(this);
    var $currImage  = $('#fp_gallery').children('img:first');
    $newimg.insertBefore($currImage);
    $loader.hide();
    $currImage.fadeOut(2000,function(){$(this).remove();});
    }).attr('src',$e_next.find('img').attr('alt'));
    }

    function showPrev(){
    --current;
    var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
    if($e_next.length == 0){
    current = nmb_thumbs;
    $e_next = $thumbScroller.find('.content:nth-child('+current+')');
    }
    $loader.show();
    $('<img class="fp_preview"/>').load(function(){
    var $newimg  = $(this);
    var $currImage  = $('#fp_gallery').children('img:first');
    $newimg.insertBefore($currImage);
    $loader.hide();
    $currImage.fadeOut(2000,function(){$(this).remove();});
    }).attr('src',$e_next.find('img').attr('alt'));
    }

                    function makeScrollable(){
    $(document).bind('mousemove',function(e){
    var top = (e.pageY - $(document).scrollTop()/2) ;
    $(document).scrollTop(top);
                        });
    }
                });
            </script>
        </body>
    </html>
      

  2.   


    朋友绝对定位的层怎么理解，我是javascript新手，基础为零。
      

  3.   


    不好意思啊，新人，发贴不够精练。
    根据四楼的提示， 找到点击小图片的事件。在里面加一个绝对定位的层  就行了 据我目测应该是这里吧？但是不知道怎么添加绝对定位层。希望朋友能指点一下var cnt_thumbs  = 0;
    for(var i=0;i<nmb_thumbs;++i){
    var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
    $('<img/>').load(function(){
    ++cnt_thumbs;
    if(cnt_thumbs == nmb_thumbs)
    //display the thumbs on the bottom of the page
    showThumbs(2000);
    }).attr('src',$thumb.find('img').attr('src'));
    }
    //make the document scrollable
    //when the the mouse is moved up/down
    //the user will be able to see the full image
    makeScrollable();//clicking on a thumb...
    $thumbScroller.find('.content').bind('click',function(e){
    var $content= $(this);
    var $elem  = $content.find('img');
    //keep track of the current clicked thumb
    //it will be used for the navigation arrows
    current  = $content.index()+1;
    //get the positions of the clicked thumb
    var pos_left  = $elem.offset().left;
    var pos_top  = $elem.offset().top;
    //clone the thumb and place
    //the clone on the top of it
    var $clone  = $elem.clone()
    .addClass('clone')
    .css({
    'position':'fixed',
    'left': pos_left + 'px',
    'top': pos_top + 'px'
    }).insertAfter($('BODY'));var windowW = $(window).width();
    var windowH = $(window).height();//animate the clone to the center of the page
    $clone.stop()
    .animate({
    'left': windowW/2 + 'px',
    'top': windowH/2 + 'px',
    'margin-left' :-$clone.width()/2 -5 + 'px',
    'margin-top': -$clone.height()/2 -5 + 'px'
    },500,
    function(){
    var $theClone  = $(this);
    var ratio = $clone.width()/120;
    var final_w = 400*ratio;$loader.show();//expand the clone when large image is loaded
    $('<img class="fp_preview"/>').load(function(){
    var $newimg  = $(this);
    var $currImage  = $('#fp_gallery').children('img:first');
    $newimg.insertBefore($currImage);
    $loader.hide();
    //expand clone
    $theClone.animate({
    'opacity' : 0,
    'top' : windowH/2 + 'px',
    'left' : windowW/2 + 'px',
    'margin-top' : '-200px',
    'margin-left' : -final_w/2 + 'px',
    'width' : final_w + 'px',
    'height' : '400px'
    },1000,function(){$(this).remove();});
    //now we have two large images on the page
    //fadeOut the old one so that the new one gets shown
    $currImage.fadeOut(2000,function(){
    $(this).remove();
    });
    //show the navigation arrows
    showNav();
    }).attr('src',$elem.attr('alt'));
    });
      

  4.   


    下载地址  http://niutuku.com/js/113549.shtml 好像下载不了.这是百度云盘的连接 http://pan.baidu.com/share/link?shareid=333767&uk=1912689792
    这是演示地址 http://demo.niutuku.com/js/16/33/