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

그것은 도움이 될 것입니다 (http://jsfiddle.net/). 또한 구체적으로 작동하지 않는 것은 무엇입니까? –

내 축소판 그림이 화살표 클릭시 왼쪽으로 이동하지 않음 http://benlevywebdesign.webatu.com/interactivemedia/slideshow.html 반 가공보기 – benlevywebdesign

글쎄, 나도 몰라 그 발생하는 경우에 .. JS 오류가 무엇인가 : 당신이 [jsfiddle]에 대한 예제를 만든 경우

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

외부 파일이 작동하지 않습니다. 그러나 귀하의 페이지에서 작업하는 등의 애니메이션이 중단되는지 확실하지 않습니다. jquery에서 http://analytics.hosting24.com/count.php에 대한 전화를 제거해보십시오. – mowgli

페이지가 완전히로드되는 데 오래 걸립니다. Somethings가 맞지 않습니다. – mowgli

jquery를 클릭하면 축소판을 왼쪽 및 오른쪽으로 스크롤 할 수 있습니까?

답변

관련 문제