代码之家 › 专栏 › 技术社区 › john

如何在div标记中重新加载CSS

angularjs css html javascript

john · 技术社区 · 6 年前

我有一个div标签,里面有图像标签。Am使用angularjs控制器动态更改图像源(基本上是一个照片幻灯片)。div标记有一个CSS类,用于在图像出现时旋转图像。我的问题是CSS只对第一个图像有效,而对其他图像无效。我已经创建了一个自定义CSS,通过角度思考它会工作,但它没有。

下面是我的HTML代码:

<!DOCTYPE html>
<html>

<head>
    <title>Test Page</title>
    <script src=" 
    https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 
    </script>
    <script type="text/javascript" src="Scripts/common.js"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="CSS/rotateTransition.css">
</head>

<body>
   <h2>Test Page</h2>

    <div ng-app="mainApp" ng-controller="commonController" ng- 
    init="init('testloc')">
        Current Image Location: {{imageObject}} <br>
        TimeLeft :{{ countDownLeft }}
        <div ng-style="customStyle.style" ng-class="customStyle.class">
                <img ng-src={{imageObject}}>
        </div>
    </div>
 </body>
</html>

下面是我在angularJS控制器中修改图像源的代码

//Call the function
 slideShow();


 //Declare the function, which puts the image in to the slide show
 function slideShow() {
    //Assign only if the image location is aquatic
    if ($scope.images[imageCounter].location ==  $scope.tvLocation) {
       $scope.imageObject = $scope.images[imageCounter].src  //set the image source  
       $scope.$apply(); //refresh the view   
       _startCountdown($scope.images[imageCounter].duration);
       setTimeout(slideShow, $scope.images[imageCounter].duration); // Change image every 6 seconds
    } else {
       setTimeout(slideShow, 1)   //If the location doesnt matchup, timeout in 1 ms
    }