如何向幻灯片添加下一个/上一个按钮

Question

超级菜鸟问题，我一直在绞尽脑汁地思考如何将下一个/上一个按钮添加到我由 Soh Tanaka 找到的简单滑块中，并希望在这项工作中寻求您的帮助。到目前为止，我已经让滑块与工具提示一起使用，并从 xml 加载图像（根据我的要求），但我对 jQuery 还很陌生，无法让下一个/上一个按钮工作:(..Here is到目前为止我得到了什么：

CSS

body {
    margin: 0; padding: 0;
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
    width: 322px;
    padding: 0;
    margin:30px 10px 0 10px;
}

/*--Main Container--*/
.main_view {
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height:270px;   width: 320px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
    z-index:1;
}

/*--Paging Styles--*/
.paging {
    position: relative;
    width: 320px; height:35px;
    text-align: center;
    line-height: 35px;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 0 2px;
    text-decoration: none;
    color: #000;
}
.paging a.active {
    color: #fff;
    font-weight: bold; 
    background: #920000; 
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

.box {
margin:0;
padding:0;
display: block;
width:318px;
height:268px;
float: left;
border:1px solid #ddd;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}

.box h3 {
font-size: 16px;
text-align:center;
white-space:wrap;
}

.box img {
margin-left:40px;
margin-bottom:-5px;
}

.box .slider-title {
color: red;
margin-bottom:4px;
margin-top:6px;
}

.box .slider-subtitle {
width:320px;
float:left;
margin-bottom:4px;
}

.box .input_Default {
width:320px;
display:block;
float:left;
text-align:center;
}

.loading {
background: url(loading.gif) no-repeat 0 0;
position: absolute;
top: 30px;
left: 30px;
z-index: 9999;
}

.subt {
color: #fff;
background:#1d1d1d;
padding:10px;
position:absolute;    
z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.moreinfo .subt { display:none; }

JS

$(document).ready(function() {

        $.ajax({
        type: "GET",
        cache: false,
        url: "ads.xml",
        data: 'xml',
        success: function (d) {
    $(d).find('promo').each(function(){
        var $promo = $(this); 
        var title = $promo.find('title').text();
        var subtitle = $promo.find('subtitle').text();
        var image = $promo.attr('image');
        var link = $promo.attr('link');
        var index = $promo.attr('index');

        var ads = '<div class="box"><h3 class="slider-title">' + title + '</h3>';
        ads += '<dt> <a class="moreinfo" href="' + link + '" target="_blank"><img alt="' + subtitle + '" src="' + image + '" /><span class="subt">test sub</span></a></dt>';
        //ads += '<dd> <span class="loading" alt="Loading" />';
        ads += '<h3 class="slider-subtitle">' + subtitle + '</h3>' ;
        ads += '<div class="input_Default"><a href="' + link + '">Learn More</a></div>';
        ads += '</dd></div>';

        var pager = '<a href="#" rel="' + index + '">' + index + '</a>';

        $('.image_reel').append($(ads));
        $('.paging').append($(pager));

        //$('.loading').fadeOut(1400);
    });
}
});

$('.image_reel').ajaxStop(function() {

    $(".paging").show();
    $(".paging a:first").addClass("active");

    var imageWidth = $(".window").width();
    var imageSum = $(".box").size();
    var imageReelWidth = imageWidth * imageSum;

    $(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){
        var triggerID = $active.attr("rel") - 1;
        var image_reelPosition = triggerID * imageWidth;

        $(".paging a").removeClass('active');
        $active.addClass('active');

        $(".image_reel").animate({ 
            left: -image_reelPosition
        }, 800 );
    }; 

    rotateSwitch = function(){
        play = setInterval(function(){
            $active = $('.paging a.active').next();
            if ( $active.length === 0) {
                $active = $('.paging a:first');
            }
            rotate();
        }, 7000);
    };

    rotateSwitch();

    $(".image_reel a").hover(function() {
        clearInterval(play);
    }, function() {
        rotateSwitch();
    }); 

    $(".paging a").click(function() {   
        $active = $(this);

        clearInterval(play);
        rotate();
        rotateSwitch();
        return false;
    });

    $(".next a").click(function() {
        $active = $('.paging a.active').parent().next().find('a');
        if ( $active.length === 0) { //If paging reaches the end…
        $active = $('.paging a:first'); //go back to first
    }

        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });

    $(".prev a").click(function() {
        $active = $('.paging a.active').prev();
        if ( $active.length === 0) { //If paging reaches the end…
        $active = $('.paging a:first'); //go back to first
    }
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });

    $('.moreinfo').each(function() {
        var subt = $(this).find('.subt');
        $(this).hover(
            function() { subt.appendTo('body'); },
            function() { subt.appendTo(this); }
        ).mousemove(function(e) {
            var x = e.pageX + 20,
                y = e.pageY + 20,
                w = subt.width(),
                h = subt.height(),
                dx = $(window).width() - (x + w),
                dy = $(window).height() - (y + h);

            if ( dx < 20 ) x = e.pageX - w - 20;
            if ( dy < 20 ) y = e.pageY - h - 20;

            subt.css({ left: x, top: y });
        });         
    });

});

});

HTML

<div class="container">
            <div class="window">    
                <div class="image_reel">
                </div>
            </div>
            <div class="paging">
<a rel="nofollow" href="#" class="next" >next</a>
<a href="#" class="next" >next</a>
<a href="#" class="prev" rel="nofollow" >previous</a>
            </div>
<a rel="nofollow" href="#" class="next" >next</a>
<a rel="nofollow" href="#" class="next" >next</a>
</div>

所有图像和按钮都是从 XML 中提取的，效果很好，但下一个/上一个按钮是我的主要问题:(。

这是 JSFiddle i 上的原始非 XML 版本进行测试，编辑，原始版本 http://jsfiddle.net/scPqJ/ 1/

你们中的一位忍者能给我指明正确的方向吗？

编辑

对于任何正在寻找解决方案的未来一代，sohtanaka.com 评论中的一位用户帮助了我并使其发挥作用。 ，这里是JsFiddle， http://jsfiddle.net/scPqJ/3/

这是Js对于按钮（您将其设置在原始 JS 的末尾，结束括号之前：

JS

$(".previous a").click(function() {    
    $active = $('.paging a.active').next();
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:first'); //go back to first
    }

    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
});    


$(".next a").click(function() {    
    $active = $('.paging a.active').prev();
    if ( $active.length === 0) { //If paging reaches the end...
        $active = $('.paging a:last'); //go back to first
    }

    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
}); 

设置完毕后，您所要做的就是定义 html 中的下一个/上一个 div，如下所示：

HTML

<div class="next">
<a href="#" >next</a>
</div>

<div class="previous">
<a href="#" >previous</a>
</div>

和瞧！ 。

Answer 1

这个应该可以工作（尽管它远非完美，请参阅下面的评论）：

$('#next').click(function(){
    var $pagingLinks = $('.paging a');
    var $nowActive = $('.paging a.active');

    var nextIndex = $nowActive.index()+1;
    if(nextIndex == $pagingLinks.length) nextIndex = 0;
    $active = $pagingLinks.eq(nextIndex);       

    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor     
}); 

我假设您在这里有一个 id 为“next”的链接可以继续。您会注意到此代码的第二部分（以“重置计时器”开头）取自您的代码（用于单击分页链接的事件处理程序）。

评论：

• 在“分页”链接的代码中（我复制了部分内容），您正在处理变量“$active”。该变量是全局定义的（作为全局对象的属性），通常应该避免这种情况。你在这里使用jquery，所以将你的'滑块'代码封装在它自己的插件中肯定是有意义的（请参阅jquery文档以获取帮助）

• 而不是设置“$active”变量，你可能只是使用 .data() 将此信息添加到插件的某些主要元素中，