Jquery 滑块下一个/上一个按钮

Posted 2023-02-25

【中文标题】Jquery 滑块下一个/上一个按钮

【英文标题】：Jquery slider next/previous buttons

【发布时间】：2012-08-06 22:08:44

【问题描述】：

我已经构建了一个滑块，我可以在其中单击图像并向前移动。我正在尝试添加“下一个”和“上一个”按钮，但遇到了麻烦。任何帮助表示赞赏！

这是我所在位置的演示... JSFiddle

<div id="container">

    <div class="next">Next</div>
    <div class="prev">Previous</div>

    <div id="image1" class="box">Orange</div>
    <div id="image2" class="box">Blue</div>
    <div id="image3" class="box">Green</div>
    <div id="image4" class="box">Red</div>
    <div id="image5" class="box">Yellow</div>

</div>

CSS

body 
    padding: 0px;    


.next 
    width:100px;
    height:50px;


.prev 
    width:100px;
    height:50px;


#container 
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;



.box 
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    left: 150%;
    top: 100px;
    margin-left: -25%;


#image1 
    background-color: orange;
    left: 50%;


#image2 
    background-color: blue;


#image3 
    background-color: green;


#image4 
    background-color: red;


#image5 
    background-color: yellow;

JQUERY

$('.box').click(function() 

$(this).animate(
    left: '-50%'
, 500, function() 
    $(this).css('left', '150%');
    $(this).appendTo('#container');
);

$(this).next().animate(
    left: '50%'
, 500);
);​

​

【参考方案1】：

嘿，看看这个：http://jsfiddle.net/Dwxfc/

这应该符合您的需要，:) 还要注意上面的示例只有下一个功能，因此它会重复自己。

希望它符合您的需求，如果不符合，请告诉我。 B-)

代码

$(function()

    //Lazyload function
    $.fn.lazyload = function()
        var image = $(this);
        if (image.attr('real-src'))
            image.attr('src', image.attr('real-src'));
            image.removeAttr('real-src');
        
        return this;
    ;

    //Slider constructor
    $.fn.imageSlider = function()
        this.each(function()
            var $slider = $(this);

            var $active = $slider.find('img:first');
            $active.addClass('active');
            $active.lazyload();

            //Slider control buttons
            var $nextButton = $slider.find('.next');
            var $prevButton = $slider.find('.previous');

            $prevButton.toggle();

            //Handle if next button should appear
            $nextButton.click(function()
                var $next = $active.next();
                $active.removeClass('active');
                $next.addClass('active');
                $active = $next;
                $active.lazyload();

                if ($active.next().length == 0)
                    $nextButton.toggle();
                
                $prevButton.show();

            )

            //Handle if next button should appear
            $prevButton.click(function()
                var $prev = $active.prev();
                $active.removeClass('active');
                $prev.addClass('active');
                $active = $prev;
                $active.lazyload();

                if ($active.prev().length == 0)
                    $prevButton.toggle();
                
                $nextButton.show();
            )
        )

            return this;
        ;

)

$(document).ready(function()
    var $slider = $('#slider');
    if ($slider.find('.active').length == 0)
        $slider.imageSlider();
    
)
​

HTML

<div id="slider" class="slider_container">
    <center>
        <a href="#" class="previous"> Previous &lt; </a>
        <a href="#" class="next"> Next &gt; </a>
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://ultradownloads.com.br/conteudo/Joyce/para_nossa_alegria_cartoon.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://www.oesquema.com.br/trabalhosujo/wp-content/uploads/2012/03/para-nossa-alegria-pan.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://youpix.com.br/wp-content/uploads/2012/03/para-nossa-alegria-uhu.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://2.bp.blogspot.com/-dcgzVluf0is/T2z1K0GbVgI/AAAAAAAAMIU/yVXoH4IHV5M/s1600/para-nossa-alegria.jpg">
        <img class="slider_image" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" real-src="http://desordempublica.com.br/wp-content/uploads/2012/03/sexta-para-nossa-alegria.jpg">
    </center>
</div>

​

CSS

.slider_container 
    position: relative;


.slider_container img 
    display:none;


.slider_container img.active 
    display:block;

​

【讨论】：

感谢您的回复。但是，我试图保留图像来自屏幕外的幻灯片效果。到目前为止，我已经能够做到这一点，但是，一次只能滑动一张图片时遇到了麻烦……看看这里：jsfiddle.net/coltanious/dRGKH

@WoolfFaulknercooleos man 会在这个效果问题上回复你，同时继续玩它应该是直接的，:)