时间戳

首页 > 解决方案 > AngularJS Scroller Directive 用于创建没有库/插件的连续滚动图像

html - AngularJS Scroller Directive 用于创建没有库/插件的连续滚动图像

问题描述

TODO：创建一个 AngularJS 指令，以无休止、平滑的从左到右滚动循环显示图像列表。为简单起见，您可以假设上述图像的固定高度/宽度。工作应在指令和样式中完成，而无需添加支持库或插件。

angular.module('myApp', [])
    .controller('myCtrl', function ($scope) {
    // list of images to scroll, each image is 280px x 200px
    $scope.images = [
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
        'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
    .directive('myScroller', function () {
    
    return {
      // >> your directive code <<
    };

});
.container {
    width: 700px;
    margin: 0 auto 100px;
    padding: 20px;
    overflow: hidden;
}
.container .image-list {
    height:200px;
    width:2240px;
}
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp">
      <div ng-controller="myCtrl">
        <div class="container">
          <h1>Static Images</h1>
          <div class="image-list">
            <img ng-repeat="image in images" ng-src="{{image}}" />
          </div>
        </div>
        <div class="container">
          <h1>Scrolling Images</h1>
          <!-- use my scroller directive, see script.js file for directions -->
          <div my-scroller="images"></div>
        </div>
      </div>
    </div>
  </body>

</html>

标签： htmlcssangularjs

解决方案

推荐阅读