0

これが私のスライドショーのすべてのコードで、 と のマウスクリックでサムネイルが左から右に移動することを除いて、すべてが機能し#slideshow-thumbs-prevます#slideshow-thumbs-next。

私は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>
4

1 に答える 1

0

まあ、jsエラーがあります..それが何かを引き起こすかどうかはわかりません:

Uncaught Error: Syntax error, unrecognized expression: >
http://analytics.hosting24.com/count.php
Failed to load resource
于 2012-04-06T00:02:22.673 に答える