Question

我在使用Soh Tanaka优秀的jQuery slide show技术时遇到了一些麻烦。我需要将触发器锚标签嵌套在无序列表中，这会破坏脚本（将锚标签拉出＆lt; ul＆gt;列表，否则会纠正问题）。我认为这取决于如何定义$ selected这一行：

$selected = $('#ix_slideshow_nav li a.selected').next();

HTML

<div id="ix_slideshow_wrap"><div id="ix_slideshow_box">
<div id="ix_slideshow_window">
        <ul id="ix_slideshow_reel">
            <li class="ixss">
                <dl>
                    <dt><a href="#">Sentence 1</a></dt>
                    <dd><a href="#"><img src="ss-focus.jpg" width="860" height="400" alt="" /></a></dd>
                    <dd class="ixss_desc">Here is a one-sentence introduction to the bullet point. <a href="#" title="Learn More">Learn More</a></dd>
                </dl>
            </li>
            <li class="ixss">
                <dl>
                    <dt><a href="#">Sentence 2</a></dt>
                    <dd><a href="#"><img src="ss-improve.jpg" width="860" height="400" alt="" /></a></dd>
                    <dd class="ixss_desc">Here is a one-sentence introduction to the bullet point. <a href="#" title="Learn More">Learn More</a></dd>
                </dl>
            </li>
            <li class="ixss">
                <dl>
                    <dt><a href="#">Sentence 3</a></dt>
                    <dd><a href="#"><img src="ss-save.jpg" width="860" height="400" alt="" /></a></dd>
                    <dd class="ixss_desc">Here is a one-sentence introduction to the bullet point. <a href="#" title="Learn More">Learn More</a></dd>
                </dl>
            </li>
        </ul>
    </div><!-- end ix_slideshow_items --></div><!-- end ix_slideshow_box -->

    <ul id="ix_slideshow_nav">
        <li id="ss1"><a href="#" rel="1" class="">1</a></li>
        <li id="ss2"><a href="#" rel="2" class="">2</a></li>
        <li id="ss3"><a href="#" rel="3" class="">3</a></li>
    </ul>
</div><!-- end ix_slideshow_wrap -->

JQUERY

    $(document).ready(function(){

    //Show the paging and activate its first link
    $("#ix_slideshow_nav a:first").addClass("selected");

    //Get size of the image, how many images there are, then determine the size of the image reel.
    var imageWidth = $("#ix_slideshow_window").width();
    var imageSum = $("#ix_slideshow_reel .ixss dd img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $("#ix_slideshow_reel").css({'width' : imageReelWidth});


    //Paging  and Slider Function
    rotate = function(){
        var triggerID = $selected.attr("rel") -1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $("#ix_slideshow_nav a").removeClass('selected'); //Remove all selected class
        $selected.addClass('selected'); //Add selected class (the $selected is declared in the rotateSwitch function)

        //Slider Animation
        $("#ix_slideshow_reel").animate({
            left: -image_reelPosition
        }, 500 );

    }; 

    //Rotation  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer
            $selected = $('#ix_slideshow_nav li a.selected').next(); //Move to the next nav item
            if ( $selected.length === 0) { //If slideshow nav reaches the end...
                $selected = $('#ix_slideshow_nav a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 2000); //Timer speed in milliseconds 
    };

    rotateSwitch(); //Run function on launch

    //On Hover
    $("#ix_slideshow_nav a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    }); 

    //On Click
    $("#ix_slideshow_nav a").click(function() {
        $selected = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation timer
        return false; //Prevent browser jump to link anchor
    });


});

Answer 1

找到正确路径的答案：

$selected = $('#ix_slideshow_nav li a.selected').parent().next().find('a'); //Move to the next nav item

向Bendyworks.com的朋友们提示答案。

Jquery幻灯片放映：正确触发？

1 个答案: