如何将下一个/上一个按钮添加到幻灯片中 [英] How to add next/prev buttons to a slideshow

查看：56
本文介绍了如何将下一个/上一个按钮添加到幻灯片中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Hyper-mega-noob-question, i've been racking my brain over how to add next/ previous buttons to a simple slider i found by Soh Tanaka and wanted to ask for your help in this endevour. So far i have gotten the slider to work with a tooltip and to load the images from an xml (per my requirement) but i'm pretty new to jQuery and can't get the next/previous buttons working :(..Here is what i got so far:

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中提取的，而且工作得很好但是下一个/上一个按钮是我的主要问题：（。

All the images and buttons are pulled from an XML, and that works just fine but the next/prev buttons are my main issue :(.

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

Here is the original, non-XML version on JSFiddle i put up for testing, EDIT, original version http://jsfiddle.net/scPqJ/1/

你们其中一个忍者可以告诉我正确的方向吗？

Can one of you ninjas out there show me the right direction?

编辑

寻找解决方案的任何下一代，sohtanaka.com上的用户评论帮我解决了问题，这里是JsFiddle， http://jsfiddle.net/scPqJ/3/

for any future generation looking for a solution, a user in sohtanaka.com comments helped me out and got it working, here is the JsFiddle, http://jsfiddle.net/scPqJ/3/

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

This is the Js for the buttons (you set it in the end of the original JS, before the end brackets:

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 ，像这样：

After you set that up, all you have to do is define the next/previous divs in the html, like so:

HTML 

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

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

和Voila！。

推荐答案

这个应该有效（虽然它远非完美，见下面的评论）：

this one should work (although it's far from perfect, see comments below):

$('#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'的链接在这里继续前进。您会注意到此代码的第二部分（以重置计时器开头）取自您的代码（用于单击分页链接的事件处理程序）。

i'm assuming here you got a link with id 'next' here to move on. you'll notice that the second part of this code (starting with 'Reset Timer') is taken from your code (the event handler for clicking on the paging links).

评论：


  • 你正在处理变量的'分页'链接代码（我复制的部分） '$活跃'。这个变量是全局定义的（作为全局对象的属性），通常应该避免。你在这里使用jquery，所以将你的'滑块'代码封装在它自己的插件中肯定是有意义的（请参阅jquery docs以获得帮助）

  • in the code of your 'paging' links (i copied parts of) you're dealing with a variable '$active'. this variable is defined globally (as a property of the global object), which should generally be avoided. you're using jquery here, so it would definitely make sense to encapsulate your 'slider' code in a plugin on it's own (see the jquery docs for help on this)

而不是设置'$ active'变量，您可以使用.data（）

instead of setting a '$active' variable, you might just add this information to some main element of your plugin using .data()

这篇关于如何将下一个/上一个按钮添加到幻灯片中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆