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

Posted 2023-02-25

【中文标题】如何在幻灯片中添加下一个/上一个按钮

【英文标题】：How to add next/prev buttons to a slideshow

【发布时间】：2011-03-28 14:27:12

【问题描述】：

超级新手问题，我一直在绞尽脑汁思考如何将下一个/上一个按钮添加到我由 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  src="' + image + '" /><span class="subt">test sub</span></a></dt>';
        //ads += '<dd> <span class="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 版本，编辑，原始版本http://jsfiddle.net/scPqJ/1/

你们有哪位忍者能告诉我正确的方向吗？

编辑

对于寻求解决方案的任何下一代，sohtanaka.com cmets 的用户帮助我解决了问题，这是 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>

瞧！

【参考方案1】：

这个应该可以工作（虽然它远非完美，请参阅下面的 cmets）：

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

cmets：

在您的“分页”链接（我复制了部分）代码中，您正在处理一个变量“$active”。这个变量是全局定义的（作为全局对象的属性），通常应该避免。您在这里使用的是 jquery，因此将您的“滑块”代码单独封装在一个插件中肯定是有意义的（请参阅 jquery 文档以获取相关帮助）

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

【讨论】：

我尝试使用您的方法，但由于某种原因，它一直倒退到幻灯片的开头，超出了视口 :( .. 感谢您的 cmets，我会研究一下它们我更好地掌握了 jQuery 如何与文档一起工作。

刚刚在我的原始作品上测试了您的代码，确实效果很好，尝试将它与我拥有的 xml 版本而不是我在 JsFiddle 上的原始版本一起使用......非常感谢您的回复，你的版本实际上更适合我。