Question

我希望div从右向左滑动，在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>

Answer 1

我现在不太擅长使用javascript，但是您始终可以使用CSS创建相同的效果。您可以制作关键帧并将动画添加到要设置动画的元素的类中。

例如：

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
    $scope.list=[];
    $scope.person={};
    $scope.sabt = function(){
        $scope.list.push($scope.person); 
        //CLEAR inputs
        $scope.person = {};       
    }       
});

玩px，您肯定会得到相同的结果，还可以将不透明度添加到某些百分比值以创建甚至更酷的效果。希望这会有所帮助

Answer 2

您将“ + =”切换为“-=”是正确的，但您需要使用scrollLeft，如果您在第一张幻灯片上，则没有“左”键。

这不是一个非常优雅的解决方案，但是我添加了一些导航控件和另一个函数来处理左右滚动。

$(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>

从右向左滑动多个div

2 个答案: