谁做过图片滚动效果

Question

 我现在的问题是 上面展示图片区域点上一张 和下一张  下面的缩图滚动条不跟着滚动，另外到最后一张和最前一张处出现问题，导致缩图选中样式丢失
 引用了 jQuery.tool.js 
自定义news.js:$(function(){
// $(".newsPic .scroll").scrollable();
 //var xx= $(".newsPic .scroll").scrollable();
 
 $(".newsPic .scroll").scrollable({ 
//size: 3, 
 vertical:false, 
 //clickable:false, 
 loop:true,//最后一项是否从头开始 
 //interval: 1000,//设置间歇时间间隔 
 //speed:2000, 
// items: '#scroll', 
// prev:'.prev',//跳转到上一项 
// next:'.next',//跳转到下一项 
// prevPage:'.prev',//跳转到上一页 
// nextPage:'.next',//跳转到下一页 
// hoverClass: 'hover', 
// easing:'linear' ,
 circular:true
 }); 
 var scrollable=$("div.newsPic .scroll").scrollable(); 
 

 
 
//$(".newsPic .scroll").scrollable({circular:true});
$(".newsPic .bigPic div h3").css({"opacity":"0.8"});
$(".newsPic .bigPic div p").css({"opacity":"0.8"});

//pass data by  link's attribute value
$(".newsPic .scroll li a").click(function(){
//del style from li
$(".newsPic .scroll li").removeClass("click");
$(".newsPic .bigPic img").attr("src",$(this).attr("href"));

var pwidth = $(this).attr("width");
var pheight = $(this).attr("height");

if (pwidth > 552) {
pheight = parseInt(pheight/pwidth*552);
pwidth = 552;

}
if (pheight > 613) {
pwidth = parseInt(pwidth/pheight*613);
pheight = 613;
}

$(".bigPic").css("left", parseInt(220) + parseInt((552 - parseInt(pwidth))/2));
$(".bigPic").css("top", parseInt(93) + parseInt((613 - parseInt(pheight))/2));

$(".bigPic").css("width", parseInt(pwidth)+18);
$(".bigPic").css("height", parseInt(pheight)+25);

// alert($(".bigPic div").css("width"));
$(".bigPic div").css("width", pwidth);
 
// alert($(".bigPic div").css("width"));
 
$(".newsPic .bigPic img").attr("width",pwidth);
$(".newsPic .bigPic img").attr("height",pheight);

//index-number show 
$(".newsPic .sheets a").text($(this).attr("inx"));


$(".newsPic .title").text($(this).attr("title"));

$(".newsPic .bigPic div h3").text($(this).attr("title"));
$(".newsPic .bigPic div p").text($(this).attr("rel"));

//add style to li
$(this).parent().addClass("click");
return false;
});

$(".newsPic .scroll li:eq(4) a").click();//modify ****

//pic's introduce ' hidden and show    button:hidden  button2:show
$(".newsPic .bigPic div span").toggle(function(){
$(".newsPic .bigPic div").css({"height":"48px"})
$(".newsPic .bigPic div h3").css({"display":"none"});
$(".newsPic .bigPic div p").css({"display":"none"});
$(this).css({"background":"url(theme/bg/news/textButton2.gif)"})
return false;
},
function(){
$(".newsPic .bigPic div").css({"height":"auto"})
$(".newsPic .bigPic div h3").css({"display":"block"});
$(".newsPic .bigPic div p").css({"display":"block"});
$(this).css({"background":"url(res/img/news/news/textButton.gif)"})
});

//    pre and next event
$(".newsPic .upPrev").click(function(){
//scrollable.move(-1);
//scrollable.click(scrollable.getIndex());
//scrollable.seekTo(scrollable.getIndex());
if($(".newsPic .scroll li.click").prev("li")){
scrollable.move(-1);
$(".newsPic .scroll li.click").prev("li").find("a").click();
}else{
alert("xxxxxx");
//scrollable.move(1);
scrollable.end();
scrollable.seekTo(scrollable.getSize()-1);

$(".newsPic .scroll li.click").next("li").find("a").click();
}
//$(".newsPic .scroll li.click").prev("li").find("a").click();



});
$(".newsPic .upNext").click(function(){
//scrollable.move(1);
//scrollable.click(scrollable.getIndex());
//scrollable.seekTo(scrollable.getIndex());
//alert(scrollable.getIndex());
//$(".newsPic .scroll li.click").next("li").find("a").click();
//alert($(".newsPic .scroll li.click").next("li")==null);
if($(".newsPic .scroll li.click").next("li")){
scrollable.move(1);
$(".newsPic .scroll li.click").next("li").find("a").click();
}else{
scrollable.move(-1);
$(".newsPic .scroll li.click").prev("li").find("a").click();
} });
模板页：
<div class="newsPic">
<h2 class="title">2010“芭莎明星慈善夜”在上海举行。</h2>
    <a class="screen" href="#"></a>
    <a class="top" href="javascript:void(0)">26<br />我顶</a>
   <a class="step" href="javascript:void(0)">28<br />我踩</a>
    <a class="upPrev" href="javascript:void(0)"></a>
    <a class="upNext" href="javascript:void(0)"></a>
    <a class="go" href="play.php?page=<?=$page?>"></a>
    <span class="sheets"><a><?=$inx?></a>/<?=$tal?></span>
    <div class="bigPic">
    
    <img src="" alt="" width="" height="" />
     <div>
         <h3></h3>
            <p></p>
            <span><a class="undis">显示/隐藏</a></span>
        </div>
        
    </div>
    
   <div class="picPage">
     <a href="show.php?page=<?=($page-1>0)?($page-1):0?>">上一组照片<img src="<?=Url::img("/tmp/imageSmall.jpg")?>" alt="" width="68" height="51" /></a>
        <a href="show.php?page=<?=($page+1<$pages)?($page+1):$pages?>">下一组照片<img src="<?=Url::img("/tmp/imageSmall.jpg")?>" alt="" width="68" height="51" /></a>
    </div>
    
    <a class="prev" href="javascript:void(0)"></a>
    <div class="scroll">
     <ul>
     <?php $k=1; foreach ($a_elites as $i=>$v) {?>
     <li>
     <a href="<?=Epic::url($v['ctime'], $v['vcode'], $v['mine'])?>" title="<?=$v['title']?>" rel="<?=$v['re']?>" width="<?=$v['pwidth']?>" 
height="<?=$v['pheight']?>" inx="<?=$k?>">
<img alt="" src="<?=Epic::url($v['ctime'], $v['vcode']."_thumb", 'jpg')?>" width="115" height="123" />
</a>
</li>
     <?php $k++; } ?>
      </ul>
  </div>
    <a class="next" href="javascript:void(0)"></a>
    
</div><script type="text/javascript"> if (parseInt('<?=$index?>') > 0) $(document).ready(function(){$(".newsPic .scroll li:eq(<?=$index?>) a").click();});</script>大侠帮忙给个思路 就是上面点了上下 ，下面缩图要对应被点上（加了样式），最后和最前如果衔接起来不丢动作效果？谢了

Answer 1

图片地址 ：http://hi.baidu.com/zxsz4085/album/item/ab6e399aabe67c8bc8eaf413.html

Answer 2

html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Photomatic Test</title>
    <link rel="stylesheet" type="text/css" href="../../common.css">
    <link rel="stylesheet" type="text/css" href="photomatic.css">
    <script type="text/javascript"
            src="../../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript"
            src="jquery.jqia.photomatic.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#thumbnails img').photomatic({
          photoElement: '#photo',
          previousControl: '#previousButton',
          nextControl: '#nextButton',
          firstControl: '#firstButton',
          lastControl: '#lastButton'
        });
      });
    </script>
  </head>  <body>
    <h1>Photomatic Tester</h1>
    <div id="thumbnails">
      <img src="thumbnails/IMG_2212.jpg"/>
      <img src="thumbnails/IMG_2222.jpg"/>
      <img src="thumbnails/IMG_2227.jpg"/>
      <img src="thumbnails/IMG_2235.jpg"/>
      <img src="thumbnails/IMG_2259.jpg"/>
      <img src="thumbnails/IMG_2269.jpg"/>
      <img src="thumbnails/IMG_2273.jpg"/>
      <img src="thumbnails/IMG_2287.jpg"/>
      <img src="thumbnails/IMG_2292.jpg"/>
      <img src="thumbnails/IMG_2296.jpg"/>
      <img src="thumbnails/IMG_2298.jpg"/>
      <img src="thumbnails/IMG_2302.jpg"/>
      <img src="thumbnails/IMG_2310.jpg"/>
      <img src="thumbnails/IMG_2319.jpg"/>
      <img src="thumbnails/IMG_2331.jpg"/>
      <img src="thumbnails/IMG_2335.jpg"/>    </div>
    <div id="photoContainer">
      <img id="photo" src=""/>
    </div>
    <div id="buttonBar">
      <button type="button" id="firstButton">First</button>
      <button type="button" id="previousButton">Previous</button>
      <button type="button" id="nextButton">Next</button>
      <button type="button" id="lastButton">Last</button>
    </div>
  </body>
</html>

Answer 3

jquery:
(function($){
  var settings;  $.fn.photomatic = function(callerSettings) {
    settings = $.extend({
      photoElement: '#photomaticPhoto',
      transformer: function(name) {
                     return name.replace(/thumbnail/,'photo');
                   },
      nextControl: null,
      previousControl: null,
      firstControl: null,
      lastControl: null
    },callerSettings||{});
    settings.photoElement = $(settings.photoElement);
    settings.thumbnails = this.filter('img');
    settings.thumbnails.each(function(n){this.index = n;});
    settings.current = 0;
    settings.thumbnails.click(function(){ showPhoto(this.index); });
    settings.photoElement.click(function(){
      showPhoto((settings.current+1) % settings.thumbnails.length);
    });
    $(settings.nextControl).click(function(){
      showPhoto((settings.current+1) % settings.thumbnails.length);
    });
    $(settings.previousControl).click(function(){
      showPhoto((settings.thumbnails.length+settings.current-1) %
                settings.thumbnails.length);
    });
    $(settings.firstControl).click(function(){
      showPhoto(0);
    });
    $(settings.lastControl).click(function(){
      showPhoto(settings.thumbnails.length-1);
    });
    showPhoto(0);
    return this;
  };  var showPhoto = function(index) {
    settings.photoElement
      .attr('src',
            settings.transformer(settings.thumbnails[index].src));
    settings.current = index;
  };})(jQuery);

Answer 4

最好给个用jQuery.tool.js  
 的scrollable对象的 我这个主要的问题是怎么弄成无缝把缩图连接起来，哪位高手懂，加我QQ啊 819357867