jQuery - 滑块滚动问题（仅在一种情况下滚动）？答案

【问题标题】：jQuery - Slider scrolling issues (only scrolls in one case)?jQuery - 滑块滚动问题（仅在一种情况下滚动）？
【发布时间】：2011-08-03 08:35:03
【问题描述】：

我做了一个水平滑块。（下面的所有代码。）

一切正常都接受滚动。 滑块仅在一种情况下左右滚动选择：当您单击图像然后使用箭头键向左或向右移动时。但如果您 (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>

【问题讨论】：

你使用了太多的选择器。最好使用变量来存储它们，而不是重复查找 x 次。
我明白了。我会改变它。但是：你能帮我解决滚动问题吗？
我想在 JSFiddle 上试一试，但现在快挂了，如果没有答案，稍后再看看
这是一个 jsfiddle，如果你想做其他改进：jsfiddle.net/dACFZ

标签： javascript jquery html scroll horizontal-scrolling

【解决方案1】：

$('div.other div.thumbnails div.slider').scrollLeft($next.position().left);

对 $previous 执行相同操作。

请摆脱：

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');

进入：

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

【讨论】：

$next.addClass('selected');之后
抱歉，将偏移量更改为位置。
顺便说一句，您可能希望使用.animate({scrollLeft: xxx}) 为滚动设置动画，而不是直接使用scrollLeft()。
是的！这样可行。最后一件事：有没有办法向左滚动，但将所选图像保持在中心？
是的，但您必须自己计算 :) 使用 .width() 命令计算滚动区域的宽度，然后计算滚动以保持滚动区域的位置图片居中。