js：使用angular实现画廊效果

最新推荐文章于 2024-05-19 10:06:15 发布

diancheng5132

最新推荐文章于 2024-05-19 10:06:15 发布

阅读量178

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dybe/p/8253866.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../angular-1.6.5/angular.js"></script>
    <style type="text/css">
        *{padding:0px;margin: 0px;list-style-type: none;}
        .bb{
            transition:all 1s ;
        }
    </style>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl" style="margin:0px auto;overflow:hidden; position:relative; width:540px">
        <!--/*通过比较此参数决定是否使用此样式*/-->
        <ul ng-style="uls" style="width: 2160px;position: relative; overflow:
             hidden; padding: 0px; margin: 0px;" ng-class="{bb:1==see}">
            <!--循环遍历lis-->
               <li ng-style="aa" style="float: left; width: 540px;" ng-repeat="item in lis">
                  <img src="{{item.img}}" />
               </li>
        </ul>
    </div>
</body>
<script language="JavaScript">
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.lis = [
            {"img":"../image/slide1.jpg"},
            {"img":"../image/slide2.jpg"},
            {"img":"../image/slide3.jpg"}
        ]
        $scope.uls = {"left":"0px"};
            var index=0;
        $scope.see=1;
        var ll=0;
            setInterval(function(){
                $scope.$apply(function(){   //如果在setInterval或者其它js类似方法中修改了数据，需要手动通过apply更新。
                    var lv=parseInt($scope.uls.left);

                    if(index==2){
                        if(ll==2){
                        $scope.lis = [
                            {"img":"../image/slide3.jpg"},
                            {"img":"../image/slide1.jpg"},
                            {"img":"../image/slide2.jpg"}
                        ]
                        }else if(ll==4){
                            $scope.lis = [
                                {"img":"../image/slide2.jpg"},
                                {"img":"../image/slide3.jpg"},
                                {"img":"../image/slide1.jpg"}
                            ]
                        }else if(ll==6){
                            $scope.lis = [
                                {"img":"../image/slide1.jpg"},
                                {"img":"../image/slide2.jpg"},
                                {"img":"../image/slide3.jpg"}
                            ]
                            ll=0;
                        }
                        console.log(ll);
                        $scope.see=0;
                        index=0;
                        lv=0;


                    }else{$scope.see=1;lv-=540;index++;ll++;}
                          $scope.uls.left = lv+"px";

                })
            },1500);
    });

</script>
</html>

转载于:https://www.cnblogs.com/dybe/p/8253866.html

diancheng5132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js：使用angular实现画廊效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial...
复制链接

扫一扫