Блог

Главная - Вопросы по программированию - Сдвиньте несколько разделов справа налево

Сдвиньте несколько разделов справа налево

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я хочу, чтобы мои разделы имели эффект скольжения справа налево, что я должен изменить в файлах CSS и JS?

Я пробовал это, но это не работает.

 $('#slider-container').animate({scrollRight:"-="-slideW}, 600);

Это исходный код с эффектом слайда слева направо.

 $(document).ready(function(e) {
    var slideW = $('#slider-container').width();
    $('.slide').click(function( e ){
        e.preventDefault();
        $('#slider-container').animate({scrollLeft:" =" slideW}, 600);
        if($('#slider-container').next()==0){
            $('#slider-container').first().animate({scrollLeft:" =" slideW}, 600);
        }
    });
}); 
 body{
    padding: 0;
    margin: 0;
}

#slider-container{
    position:relative;
    overflow:hidden;
    margin:0 auto;
    background:#cf5;
    width:100%;
    height:850px;
    white-space:nowrap;
}
#slider-container div{
    position:relative;
    display:inline-block;
    margin-right:-4px;
    white-space:normal;
    vertical-align:top;
    *display:inline;
    background:#eee;
    width:100%;
    height:850px;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="functions.js"></script>
    <title>Title</title>
</head>
<body>
    <div id="slider-container">
        <div class="slide active"><p>This is desktop 1</p></div>
        <div class="slide">This is desktop 2</div>
        <div class="slide">This is desktop 3</div>
        <div class="slide">This is desktop 4</div>
    </div>
</body>
</html>

Ответ №1:

Я сейчас не очень хорошо разбираюсь в javascript, но вы всегда можете создать тот же эффект с помощью CSS. Вы можете создать ключевой кадр и добавить анимацию к классу элементов, которые вы хотите анимировать.

Например:

 

@keyframes moveInLeft {
    0% {
        transform: translateX(-100px);
    }
    80% {
        transform: translateX(10px); 
    }
    100% {
        transform: translate(0); 
    }
}

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

Комментарии:

1. Спасибо за ваш ответ, но я должен использовать jQuery.

Ответ №2:

Вы были правы, переключив » =» на «-=», но вам нужно использовать scrolleft, и если вы находитесь на первом слайде, «влево» для перехода нет.

Это не очень элегантное решение, но я добавил некоторые элементы управления навигацией и еще одну функцию для обработки прокрутки влево и вправо.

 $(document).ready(function(e) {
                var slideW = $('#slider-container').width();
                $('#right').click(function( e ){
                        e.preventDefault();
                        $('#slider-container').animate({scrollLeft:" =" slideW}, 600);
                        if($('#slider-container').next()==0){
                            $('#slider-container').first().animate({scrollLeft:" =" slideW}, 600);
                        }  
                });

                $('#left').click(function( e ){
                    e.preventDefault();
                    $('#slider-container').animate({scrollLeft:"-=" slideW}, 600);
                    if($('#slider-container').next()==0){
                        $('#slider-container').first().animate({scrollLeft:" =" slideW}, 600);
                    }
                });
            }); 
 body{
                padding: 0;
                margin: 0;
            }

            #slider-container{
                position:relative;
                overflow:hidden;
                margin:0 auto;
                background:#cf5;
                width:100%;
                height:150px;
                white-space:nowrap;
            }

            #slider-container div{
                position:relative;
                display:inline-block;
                margin-right:-4px;
                white-space:normal;
                vertical-align:top;
                *display:inline;
                background:#eee;
                width:100%;
                height:100%;
            }

            .controls div {
                display: inline-block;
            } 
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <title>Title</title>
    </head>
    <body>
        <div id="slider-container">
            <div class="slide active"><p>This is desktop 1</p></div>
            <div class="slide">This is desktop 2</div>
            <div class="slide">This is desktop 3</div>
            <div class="slide">This is desktop 4</div>
        </div>

        <div class="controls">
            <div id="left"><<<</div>
            <div id="right">>>></div>
        </div>
        
    </body>
</html>
Метки: