Управление ползунком Jquery - PullRequest
Новая
       2

Управление ползунком Jquery

0 голосов
/ 26 февраля 2012

Я хочу создать слайдер с контентом, который имеет стрелки слева и справа для навигации. Что я хочу, чтобы установить положение ползунка + 100px (при нажатии правой кнопки) и -100px (при нажатии левой кнопки). Эта функция работает.

Но что не так, так это то, что я хочу отключить его перемещение, когда оно достигло определенного значения x позиции. Поэтому, когда мой контент достиг конца, он должен остановиться, чтобы пользователь мог только вернуться назад.

Надеюсь, вы сможете мне помочь, потому что я не могу его найти.

CSS 

#container{
    width: 500px;
    height: 150px;
    background:#CDFAA8;
    overflow:hidden;
    position:absolute;
    left: 13px;
    }

#slider{
    width: 200px;
    height: 150px;
    background:#063;
    position:absolute;
    left: 0px;
}

#block1{
    width: 100px;
    height: 150px;
    background:#067;
    float: left;
}

#block2{
    width: 100px;
    height: 150px;
    background:#079;
    float: left;
}

#move_right{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    right:0px;
    z-index: 200;
    opacity: 0.2;
}

#move_left{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    left:0px;
    z-index: 200;
    opacity: 0.2;
}​

HTML 

<div id="container">
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div>
<div id="slider">

    <div id="block1"></div>    
    <div id="block2"></div> 

</div>
</div>

Java 

$("#right").click(function() {
        $("#slider").animate({
            "left": "+=100px"
             }, "slow");
});

$("#left").click(function() {
        $("#slider").animate({
            "left": "-=100px"
        }, "slow");

});

Ответы [ 3 ]

0 голосов
/ 26 февраля 2012

Вы должны сделать некоторую проверку при нажатии на кнопку слайда.

Вот код, который делает это. Я поместил его в замыкание и сделал его динамичным, просто «шаг» жестко запрограммирован, потому что ваш «слайдер» не имеет ширины, которую вы хотите, чтобы он скользил: 

(function($) {
    var slider = $('#slider'),
        step = 100,
        left = parseInt(slider.css('left'), 10),
        max = $('#container').width() - slider.width(),
        min = 0;

    $("#right").click(function() {
        if (left < max) {
            var newLeft = left+step;
            left = (newLeft<max) ? newLeft : max;
            $("#slider").animate({
                "left": left + 'px'
            }, "slow");
        }
    });

    $("#left").click(function() {
        if (left > 0) {
            var newLeft = left - step;
            left = (newLeft>min) ? newLeft : min;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });
})(jQuery);
0 голосов
/ 12 марта 2012

Окончательное решение этого слайдера было:

HTML 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#temp{
height: 300px;
}

#container{
    width: 500px;
    height: 150px;
    background:#CDFAA8;
    overflow:hidden;
    position:absolute;
    left: 13px;
    }

#slider{
    width: 1300px;
    height: 150px;
    background:#063;
    position:absolute;
    left: 0px;
}

#block1{
    width: 100px;
    height: 150px;
    background:#067;
    float: left;
}

#block2{
    width: 100px;
    height: 150px;
    background:#079;
    float: left;
}

#move_right{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    right:0px;
    z-index: 200;
    opacity: 0.2;
}

#move_left{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    left:0px;
    z-index: 200;
    opacity: 0.2;
}​
</style>
</head>

<body>
<div id="temp">
<div id="container">
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div>
<div id="slider">

    <div id="block1">1</div>    
    <div id="block2">2</div>
    <div id="block1">3</div>    
    <div id="block2">4</div> 
    <div id="block1">5</div>    
    <div id="block2">6</div>
    <div id="block1">7</div>    
    <div id="block2">8</div>
    <div id="block1">9</div>
    <div id="block2">10</div>
    <div id="block1">11</div>    
    <div id="block2">12</div>
    <div id="block1">13</div>


</div>
</div>
</div>

JAVA 

(function($) {
    var slider = $('#slider'),
        step = 500,
        left = parseInt(slider.css('left'), 10),
        max = $('#container').width() - slider.width(),
        min = 0;

    $("#left").click(function() {
        if (left > max) {
            var newLeft = left - step;
            left = (newLeft>max) ? newLeft : max;
            $("#slider").animate({
                "left": left + 'px'
            }, "slow");
        }
    });

    $("#right").click(function() {
        if (left < 0) {
            var newLeft = left + step;
            left = (newLeft<min) ? newLeft : min;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });
})(jQuery);
0 голосов
/ 26 февраля 2012 
var L = parseInt($("#slider").css('left'));

$("#right").click(function() {
    if (L<400) {
        $("#slider").animate({
            "left": "+=100px"
             }, "slow");
        });
    }

$("#left").click(function() {
    if (L>0) {
        $("#slider").animate({
            "left": "-=100px"
            }, "slow");
        });
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...