开发者

jQuery - Slider scrolling issues (only scrolls in one case)?

问答 作者：

I made a sort of a horizontal slider. (All code for it below.)

Everything works accept the scrolling. The slider only scrolls left and right with selections in one case: when you click a image and then go left or right using the arrow keys. But it doesn't scroll if you (1) just click the previous and next buttons or (2) never click and only use arrows 开发者_如何学JAVAkeys. (It may be a focus problem?)

How can I fix this?

Code:

<!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>


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

Do the same for $previous.

Please get rid of:

div.backdrop {
    position:absolute;

And:

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

I had to remove those before I could check the code for you, since it did not fit on my screen once I had the console open.

BTW you can turn this:

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

继续阅读：horizontal-scrollingjavascriptjqueryscroll

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9