jQuery - проблемы с прокруткой ползунка (только в одном случае) - PullRequest
Новая
       7

jQuery - проблемы с прокруткой ползунка (только в одном случае)

0 голосов
/ 03 августа 2011

Я сделал своего рода горизонтальный слайдер. (Весь код ниже).

Все работает, принимайте прокрутку. Ползунок прокручивает только влево и вправо с выделениями только в одном случае: когда вы щелкаете изображение, а затем перемещаетесь влево или вправо с помощью клавиш со стрелками. Но он не прокручивается, если вы (1) просто щелкаете предыдущий и следующие кнопки или (2) никогда не нажимают и используют только клавиши со стрелками. (Это может быть проблема фокуса?)

Как я могу это исправить?

Код: 

<!DOCTYPE html> 
<html>
<style>
div.backdrop {
    position:absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    margin:0;
    padding:0;
}

div.other {
    position: absolute;
    top:50%;
    margin-top:-255px;
    left:0;
    width:100%;
}

div.other div.window {
    width: 560px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: 5px solid rgba(0, 0, 0, 0.1);
}

div.other div.all {
    width: 560px;
    margin: 0px auto;
    background-color: #111111;
    border-radius: 5px;
}

div.other div.main {
    width: 550px;
    height: auto;
    margin: 0px auto;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px 5px 0px 0px;
}

div.other div.main div.picture {
    height: 350px;
    margin: 0px auto;
    min-height: 350px;
    background: black;
    min-width: 30px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.1);
}

div.other div.main div.picture img {
    border-radius: 5px;
    height:350px;
    max-width:550px;
    border-radius:5px;  
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}

div.other div.main div.inner-shadow {
    position: absolute;
    width: 550px;
    height: 350px;
    top: 100px;
    border-radius: 5px;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.6);
}

div.other div.infos {
    width: auto;
    height: 62px;
    padding: 0px;
    background-color: #000;
    border-radius: 0px 0px 5px 5px;
}

div.other div.infos div.previous {
    float: left;
    border-right: 1px solid #e5e5e5;
    margin-right: 10px;
}

div.other div.infos div.previous button {
    display: block;
    width: 30px;
    height: 56px;
    padding-top: 5px;
    background-color: red;
    border: none;
}

div.other div.infos div.next {
    float: right;
    border-left: 1px solid #e5e5e5;
    margin-left: 10px;
}

div.other div.infos div.next button {
    display: block;
    width: 30px;
    height: 56px;
    padding-top: 5px;
    background-color: transparent;
    border: none;
    background-color:red;
}

div.other div.infos button:hover {
    cursor: pointer;
}


div.other div.thumbnails {
    width: auto;
    height: 106px;
    padding-bottom: 5px;
    background-color: #fff;
    border-radius: 5px; 
    overflow: hidden;
    box-shadow: none;
}

div.other div.thumbnails div.slider {
    width: auto;
    height: 101px;
    overflow-y:hidden;
    overflow-x:scroll;
    padding: 0px 7px;
    position:relative;
}

div.other div.thumbnails div.slider ul {
    position:relative;
}


div.other div.thumbnails ul {
    width: 560px;
    height: 80px;
    margin: 0px;
    padding: 10px 0px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}

div.other div.thumbnails ul li {
    display: inline-block;
    height: 80px;
    margin: 0px 3px;
}

div.other div.thumbnails ul li a img {
    display: block;
    border-radius: 4px;
    border: 2px solid #fff;
    -webkit-transition: ease-in border 0.2s;
    width: auto;
    height:80px;
    max-height:80px;
}

div.other div.thumbnails ul li.selected a img,
div.other div.thumbnails ul li a:hover img {
    border: 4px solid #000;
}


</style> 
<body>
    <div class="backdrop">
        <div class="other">     
        <div class="window">
            <div class="all">

                <div class="infos" style="text-align:center;">
                    <div class="previous"><button>Previous</button></div>
                    <div class="next"><button>Next</button></div>
                    <p> test</p>
                </div>
                <div class="thumbnails">
                    <div class="slider">
                        <ul>
                            <li class="selected"><a href="#"><img src="http://cf1.imgobject.com/backdrops/a2e/4bc95852017a3c57fe027a2e/avatar-original.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/90/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/100/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/60/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/119/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/92/89" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/60/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/119/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/92/89" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/60/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/119/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/92/89" alt="" /></a></li>
                        </ul>   
                    </div>  
                </div>  
            </div>
        </div>  
        </div>  

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="g.js"></script>
    <script type="text/javascript">

    $('div.slider ul li a img').click(function() {
        if(!$(this).parent().parent().hasClass('selected')){
            $('div.slider ul li.selected').removeClass('selected');
            $(this).parent().parent().addClass('selected');
            $('div.main div.picture img').attr('src',$(this).attr('src'));
        }
    });

    $('div.infos div.previous').click(function(){
        if($('div.slider ul li.selected').prev().is('li')){
            var $previous = $('div.slider ul li.selected').prev();
            $('div.slider ul li.selected').removeClass('selected');
            $previous.addClass('selected');
            $('div.main div.picture img').attr('src',$previous.children('a').children('img').attr('src'));
        }
    });

    $('div.infos div.next').click(function(){
        if($('div.slider ul li.selected').next().is('li')){
            var $next = $('div.slider ul li.selected').next();
            $('div.slider ul li.selected').removeClass('selected');
            $next.addClass('selected');
            $('div.main div.picture img').attr('src',$next.children('a').children('img').attr('src'));
        }       
    });

    $(document).keydown(function(e){
        if (e.keyCode == 37) { //left
            if($('div.slider ul li.selected').prev().is('li')){
                var $previous = $('div.slider ul li.selected').prev();
                $('div.slider ul li.selected').removeClass('selected');
                $previous.addClass('selected');
                $('div.main div.picture img').attr('src',$previous.children('a').children('img').attr('src'));
            }
        }
        else if (e.keyCode == 39) { //right
            if($('div.slider ul li.selected').next().is('li')){
                var $next = $('div.slider ul li.selected').next();
                $('div.slider ul li.selected').removeClass('selected');
                $next.addClass('selected');
                $('div.main div.picture img').attr('src',$next.children('a').children('img').attr('src'));
            }      
        }
    });


    </script>
</body>
</html>

1 Ответ

0 голосов
/ 03 августа 2011 
$('div.other div.thumbnails div.slider').scrollLeft($next.position().left);

Сделайте то же самое для $ предыдущего.

Пожалуйста, избавьтесь от: 

div.backdrop {
    position:absolute;

И: 

div.other {
    position: absolute;
    top:50%;
    margin-top:-255px;

Я должен был удалить их раньшеЯ мог бы проверить код для вас, так как он не помещался на моем экране, как только у меня была открыта консоль.

Кстати, вы можете включить это: 

var $previous = $('div.slider ul li.selected').prev();
$('div.slider ul li.selected').removeClass('selected');
$previous.addClass('selected');

Into: 

var $previous = $('div.slider ul li.selected').removeClass('selected').prev().addClass('selected');
...