Jquery 滑块下一个/上一个按钮 [英] Jquery slider next/previous buttons

查看：33
本文介绍了Jquery 滑块下一个/上一个按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<div class="next">Next</div><div class="prev">Previous</div><div id="image1" class="box">橙色</div><div id="image2" class="box">蓝色</div><div id="image3" class="box">Green</div><div id="image4" class="box">红色</div><div id="image5" class="box">黄色</div>

CSS

body {填充:0px；}.下一个 {宽度:100px；高度:50px；}.prev {宽度:100px；高度:50px；}#容器 {位置:绝对；边距:0px；填充:0px；宽度:100%；高度:100%；溢出:隐藏；}.盒子 {位置:绝对；宽度:50%；高度:300px；行高:300px；字体大小:50px；文本对齐:居中；左:150%；顶部:100px；左边距:-25%；}#image1 {背景颜色:橙色；左:50%；}#image2 {背景颜色:蓝色；}#image3 {背景颜色:绿色；}#image4 {背景颜色:红色；}#image5 {背景颜色:黄色；}

查询

$('.box').click(function() {$(this).animate({左:'-50%'}, 500, 函数() {$(this).css('left', '150%');$(this).appendTo('#container');});$(this).next().animate({左:'50%'}, 500);});

解决方案

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

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

希望它适合您的需要，如果这不适合，请让我知道.B-)

代码

$(function(){//延迟加载函数$.fn.lazyload = function(){var 图像 = $(this);if (image.attr('real-src')){image.attr('src', image.attr('real-src'));image.removeAttr('real-src');}返回这个；};//滑块构造函数$.fn.imageSlider = function(){this.each(function(){var $slider = $(this);var $active = $slider.find('img:first');$active.addClass('active');$active.lazyload();//滑块控制按钮var $nextButton = $slider.find('.next');var $prevButton = $slider.find('.previous');$prevButton.toggle();//处理下一个按钮是否应该出现$nextButton.click(function(){var $next = $active.next();$active.removeClass('active');$next.addClass('active');$active = $next;$active.lazyload();如果 ($active.next().length == 0){$nextButton.toggle();}$prevButton.show();})//处理下一个按钮是否应该出现$prevButton.click(function(){var $prev = $active.prev();$active.removeClass('active');$prev.addClass('active');$active = $prev;$active.lazyload();如果 ($active.prev().length == 0){$prevButton.toggle();}$nextButton.show();})})返回这个；};})$(document).ready(function(){var $slider = $('#slider');if ($slider.find('.active').length == 0){$slider.imageSlider();}})

HTML

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);
});​

​

解决方案

Hey Check this one out: http://jsfiddle.net/Dwxfc/

This should fit your need,:) also note the above sample only have the next functionality hence it repeats itself.

Rest hope it fits your need, please lemme know if this doesn't. B-)

Code

$(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;
}
​

这篇关于Jquery 滑块下一个/上一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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