Javascript 为报价创建幻灯片

Javascript 为报价创建幻灯片,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我目前正在制作一本相册,我正在使用AngularJS和CSS,我正在使用的图片显示得太大了。无论我做什么,我都无法调整图片的大小,我想知道是否有人能看到我做错了什么。我知道我可以在Photoshop中调整大小,但当我这样做时,它们不会在预览中正确显示。任何帮助都将不胜感激。我的JS代码如下所示 'use strict'; angular.module('example366', ['ngAnimate', 'ngTouch']) .controller('MainCtrl', function

我目前正在制作一本相册,我正在使用AngularJS和CSS,我正在使用的图片显示得太大了。无论我做什么,我都无法调整图片的大小,我想知道是否有人能看到我做错了什么。我知道我可以在Photoshop中调整大小,但当我这样做时,它们不会在预览中正确显示。任何帮助都将不胜感激。我的JS代码如下所示

'use strict';

angular.module('example366', ['ngAnimate', 'ngTouch'])
.controller('MainCtrl', function ($scope) {

// Set of Photos
$scope.photos = [
    {src: 'Images/KyahMaxCabin.jpg', desc: 'Kids Cabin', height: "250px", width: "300px"},
    {src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
    {src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
    {src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
    {src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
    {src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
];

// initial image index
$scope._Index = 0;

// if a current image is the same as requested image
$scope.isActive = function (index) {
    return $scope._Index === index;
};

// show prev image
$scope.showPrev = function () {
    $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};

// show next image
$scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};

// show a certain image
$scope.showPhoto = function (index) {
    $scope._Index = index;
};
});
我从一个教程网站下载了代码,第一张图片是我目前为止唯一的一张。我想玩一玩,看看会发生什么,然后再添加很多图片。所以第一张照片的代码是我的,我只是想得到一些关于如何改变尺寸的反馈。我刚刚开始使用JavaScript,所以这对我来说是一种全新的体验


谢谢大家!

您还应该向我们显示放置此滑块的html行,以及设置图像样式的相关css。否则很难回答。 您可能不需要编写额外的js,您可以通过对滑块中的img元素进行简单的css样式化来解决大小调整问题。可以这么简单:

img {
  width: 100%;
}

当然,我不确定javascript如何在文档中设置这个滑块,所以我不知道需要使用哪个CSS选择器来定位滑块中的img元素。几乎可以肯定的是,你的问题可以通过css定位你的img元素并调整一个或几个属性来解决

注:做宽:100%;将使您的图像适合其所在容器的宽度