Question

Hyper-mega-noob-question，我一直绞尽脑汁思考如何将下一个/前一个按钮添加到Soh Tanaka发现的简单滑块上，并希望在这次尝试中寻求你的帮助。到目前为止，我已经使用滑块来处理工具提示并从xml加载图像（根据我的要求），但我是jQuery的新手，并且无法使下一个/上一个按钮工作:( ..这是到目前为止我得到了什么：

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上进行测试的原始非XML版本， EDIT，原始版本 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>

和Voila！。

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 docs以获得帮助）
而不是设置'$ active'变量，您可以使用.data（）

如何将下一个/上一个按钮添加到幻灯片中

1 个答案: