Question

您好我正在网页上工作，并希望向客户展示我的产品，就像这样

http://store.americanapparel.net/french-terry-s-s-kangaroo-pullover-hoody_fs424

我想要显示我的图像，并且产品图像的所有其他变体将显示在更大的图像和所有效果下。有人能告诉我如何实现这一目标吗？感谢

Answer 1

我就是这样做的：

一点AngularJs

var demo = angular.module('demo', []);

demo.controller('demoCtrl', function($scope) {

  $scope.imgs = {};

  $scope.imgs.a = {
    'small': 'http://placehold.it/150x150/000000',
    'large': 'http://placehold.it/500x500/000000'
  };

  $scope.imgs.b = {
    'small': 'http://placehold.it/150x150/cccccc',
    'large': 'http://placehold.it/500x500/cccccc'
  };

  $scope.imgs.c = {
    'small': 'http://placehold.it/150x150/ffffff',
    'large': 'http://placehold.it/500x500/ffffff'
  };

  $scope.viewShowing = $scope.imgs.a.large;

  $scope.applyNewLargeView = function(largeViewUriString){
   $scope.viewShowing = largeViewUriString; 
  }

});

CSS

* {
  padding: 0;
  margin: 0;
}

.container {
  width: 500px;
}
.main,
.sub {
  display: block
}
.main > img {
  width: 100%;
}
.sub > img {
  width: 33%;
}

玉标记

main(ng-app="demo", ng-controller="demoCtrl", class="container")
  .main
    img(ng-src="{{ viewShowing }} ")
  .sub
    img(ng-repeat="img in imgs", ng-click="applyNewLargeView(img.large)" ng-src="{{ img.small}}")

继承成品：

http://codepen.io/nicholasabrams/pen/MwOMNR

PS：你应该在下次询问之前先自己尝试一下，否则你会继续像你这次做的那样投票，尽管我没有给你投票。：）

产品图片中的图片缩略图

1 个答案: