当前位置： 文江博客话题详情

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

发布于 2024-11-28 03:57:20 字数 8242 浏览 0 评论 0原文

我制作了一种水平滑块。 （下面是它的所有代码。）

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

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 keys. (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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

琉璃梦幻 2024-12-05 03:57:20
$('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');

$('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');
回复 原文
~没有更多了~

关于作者

何以畏孤独

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文