如何让我的缩略图滚动左侧和右侧点击jquery？

所以这里是我的幻灯片的所有代码，除了缩略图从左到右移动鼠标点击#slideshow-thumbs-prev和#slideshow-thumbs-next以外的所有工作。如何让我的缩略图滚动左侧和右侧点击jquery？

我是jquery的新手，所以请尽可能描述一下。让我知道这里发生了什么，如果我失去了一些东西或代码没有正确标记到我的HTML。由于

<script type="text/javascript"> 

var index = 0; 

$(document).ready(function(){ 
function next() { 
    index++; 
    if (index > 11) { 
     index = 0; 
    } // end if 
    show_slide(); 
} // end next() 

function prev() { 
    index--; 
    if (index < 0) { 
     index = 11; 
    } // end if 
    show_slide(); 
} // end prev() 


$("#slideshow-thumbs-next").click(function(){ 
    index ++; 
    if (index > 11) { 
     index = 0; 
    }   
    var position = $('#slidesthumbnails>div').eq(index).position(); 
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'}); 
}); 

$("#slideshow-thumbs-prev").click(function(){ 
    index --; 
    if (index > 0) { 
     index = 11; 
    }   
    var position = $('#slidesthumbnails>div').eq(index).position(); 
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'}); 
}); 

function show_slide() { 
    $("#slideshow-container>.slideshow-stage>img").eq(index).fadeIn(500).siblings().fadeOut(500); 
    $("#slide-caption-box>.slide-caption>div").eq(index).fadeIn(500).siblings().fadeOut(500); 
    //highlight thumbnail 
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").removeClass("selected").eq(index).addClass("selected"); 
} 

$(function() { 
    $("#slideshow-container>.slideshow-stage>img").aeImageResize({ height: 476, width: 680 }); 
}); 

    $("#slideshow-container>.slideshow-stage>img").eq(0).siblings().hide(); 
    $("#slide-caption-box>.slide-caption>div").eq(0).siblings().hide(); 

    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").click(function(){ 
     var index = $(this).index(); 
     $(this).addClass("selected").siblings().removeClass("selected"); 
     $("#slideshow-container>.slideshow-stage>img").eq(index).fadeIn(500).siblings().fadeOut(500); 
     $("#slide-caption-box>.slide-caption>div").eq(index).fadeIn(500).siblings().fadeOut(500);  
    }); 

    //click functions, 
    $("#slideshow-container>.slideshow-stage>.slideshow-next").click(function(){ 
     index = $(this).index(); 
     $(this).addClass("selected").siblings().removeClass("selected"); 
     show_slide(); 
    }); 

    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").click(function(){ 
     index = $(this).index(); 
     $(this).addClass("selected").siblings().removeClass("selected"); 
     show_slide(); 

    }); 

      $("#slideshow-next").click(next); 
      $("#slideshow-prev").click(prev); 

      $("#slideshow-thumbs-next").click(next); 
      $("#slideshow-thumbs-prev").click(prev); 


    $(function() {   
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").mouseover(function (event) { 
     $(this).siblings().stop().animate({opacity: 0.4}, 200);  
     $(this).stop().animate({opacity: 1.0}, 200); 
     event.stopPropagation();  // don't fire the body click handler 
    }); 
    }); 

    $(function() {   
    $("#thumbnails-container>#thumbnails-wrapper>#slidesthumbnails>.thumbnails").mouseout(function (event) {    
     $(this).siblings().stop().animate({opacity:1.0}, 200);  
     $(this).stop().animate({opacity: 1.0}, 200); 
     event.stopPropagation();  // don't fire the body click handler 
    }); 

    }); 
    });

<LINK REL="SHORTCUT ICON" HREF="http://benlevywebdesign.webatu.com/images/favicon.ico"> 

</head> 

<body> 

<div id="container"> 
<div id="headerReplacement"> 
    <p>&nbsp;</p> 
    <p>benlevygraphics</p> 
</div> 

<span class="class1"><div id="mainnav"> 
     <ul> 
     <li><a href="http://benlevywebdesign.webatu.com/"><img src="../images/homevector_v1.png" alt="" onmouseout="this.src='../images/homevector_v1.png'" onmouseover="this.src='../images/homevector_v2.png'"></a></li> 
     </ul> 
     </div></span> 
     <div id="titlegallery"> 
     <p class="photographs">"The Best" - A Graphic Design Gallery</p> 
     </div> 

<!--This is the gallery code here--> 
<div id="gallery1"> 

    <div id="slideshow-container"> 

    <div class="slideshow-stage"> 
     <img src="img/Building.jpg" /> 
     <img src="img/Magazine Cover.jpg" /> 
     <img src="img/Clocks.jpg" /> 
     <img src="img/hitsdraft.jpg" /> 
     <img src="img/regenwebsite.jpg" /> 
     <img src="img/BrendanSchaffer.jpg" /> 
     <img src="img/logobml.jpg" /> 
     <img src="img/studiox.jpg" /> 
     <img src="img/benlevygraphicsspace.jpg" /> 
     <img src="img/five.jpg" /> 
     <img src="img/backofcdcover.jpg" /> 
     <img src="img/frontofcdcover.jpg" /> 
    </div> 


    <div id="slide-caption-box"> 
    <div id="imagedescription"> 
     <img src="../images/Image-Description.png"> 
    </div> 
     <div class="slide-caption"> 
       <div> 
        <h4>Vector Building</h4> 
        <p>Drawn using Illustrator </p><p class="creatednote">*AAU</p> 
       </div> 

       <div> 
        <h4>Magazine Cover</h4> 
        <p>designed using Illustrator </p><p class="creatednote">*AAU</p> 
       </div> 

       <div> 
        <h4>Clocks</h4> 
        <p>designed using Illustrator </p><p class="creatednote">*AAU</p> 
       </div> 

       <div> 
        <h4>Hole in the Sky Tours Website</h4> 
        <p>website draft designed using Illustrator <a href="http://benlevywebdesign.webatu.com/holeintheskytours"> View the finished Hole in the Sky Tours Website here</a> </p><p class="creatednote">*AAU</p> 
       </div> 

       <div> 
        <h4>Regen Website Mock-up</h4> 
        <p>designed using Illustrator </p><p class="creatednote">*AAU</p> 
       </div> 

       <div> 
        <h4>BrendanSchaffer Logo Design</h4> 
        <p>designed using Illustrator </p><p class="creatednote">*HS</p> 
       </div> 

       <div> 
        <h4>B M L Logo</h4> 
        <p>Version 1 designed using Illustrator </p><p class="creatednote">*HS</p> 
       </div> 

       <div> 
       <h4>Studio X</h4> 
        <p>Studio X Bio Page Mock-Up designed using Illustrator </p><p class="creatednote">*AAU</p> 
       </div> 

       <div> 
        <h4>Ben Levy Graphics</h4> 
        <p>Ben Levy Graphics name logo designed using Photoshop </p><p class="creatednote">*HS</p> 
       </div> 

       <div> 
        <h4>Five</h4> 
        <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p> 
       </div> 

       <div> 
        <h4>Five</h4> 
        <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p> 
       </div> 

       <div> 
        <h4>Five</h4> 
        <p>A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop </p><p class="creatednote">*HS</p> 
       </div> 

       </div> 
       </div> 

    <div id="thumbnails-container"> 
      <a class="prev" id="slideshow-thumbs-prev"><span>prev</span></a> 
      <a class="next" id="slideshow-thumbs-next"><span>next</span></a> 

     <div id="thumbnails-wrapper"> 
     <div id="thumbnails-box"> 
    <div class="thumbnails"><img src="imglorez/Building.jpg" width="58" height="40" /></div>  
    <div class="thumbnails"><img src="imglorez/Magazine Cover.jpg" width="31" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/Clocks.jpg" width="62" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/hitsdraft.jpg" width="56" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/regenwebsite.jpg" width="60" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/BrendanSchaffer.jpg" width="50" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/logobml.jpg" width="55" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/studiox.jpg" width="56" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/benlevygraphicsspace.jpg" width="64" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/five.jpg" width="29" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/backofcdcover.jpg" width="52" height="40" /></div> 
    <div class="thumbnails"><img src="imglorez/frontofcdcover.jpg" width="80" height="40" /></div> 
</div> 
</div> 
</div> 

    <div id="slideshow-prev"></div> 
    <div id="slideshow-next"></div> 

</div> 
</div>

来源

2012-04-05 benlevywebdesign

如果你创建了[的jsfiddle]为例这将是有益的（ http://jsfiddle.net/）。另外，具体是什么不工作？ – 2012-04-05 23:16:51

我的缩略图没有移动到左侧点击箭头 http://benlevywebdesign.webatu.com/interactivemedia/slideshow.html 看到它半工作 – benlevywebdesign 2012-04-05 23:44:49

嗯，有一个js错误..如果导致说不上来了一句：

Uncaught Error: Syntax error, unrecognized expression: > 
http://analytics.hosting24.com/count.php 
Failed to load resource

来源

2012-04-06 00:02:22 mowgli

我不知道那是什么？错误显示在这个工作版本与左外滚动 http://benlevywebdesign.webatu.com/interactivemedia/ – benlevywebdesign 2012-04-06 00:16:46

外部文件失败。但我不确定它是否会阻止任何动画等在您的网页上工作。尝试删除jquery中的http://analytics.hosting24.com/count.php的呼叫 – mowgli 2012-04-06 00:19:11

您的页面需要永久加载才能完全加载。 Somethings不对 – mowgli 2012-04-06 00:20:17

如何让我的缩略图滚动左侧和右侧点击jquery？

回答

相关问题