angularJS：页面刷新时更改图像。 否则（如果未刷新）要在5秒内自动更改
[英]angularJS: Change Image when Page Refresh. otherwise (if not refreshed) want to change automatically in 5 sec
问题描述
Here am created one page with Image changing while the page refresh . 
在这里创建了一个页面， 页面刷新时 图像发生了变化 。 from this SO question Change Image when Page Refresh in angularJS . 这个问题从angularJS中的Page Refresh更改图像 。 Now i need to change the image automatically after the 5 seconds, which means the page refreshed or not the image want to change. 现在，我需要在5秒钟后自动 更改图像 ，这意味着页面已刷新或图像不想要更改。 How can i solve this issue by implementing this following code. 我如何通过实施以下代码来解决此问题。 please help me... 请帮我...
if(!localStorage.getItem("uID")){ var s = {"id":1};
localStorage.setItem("uID", JSON.stringify(s))
}
$scope.data = [{
"id": 1,
"path": "Content/Banner/banner.jpg"
},
{
"id": 2,
"path": "Content/Banner/banner1.jpg"
},
{
"id": 3,
"path": "Content/Banner/banner2.jpg"
},
{
"id": 4,
"path": "Content/Banner/banner3.jpg"
}]
var item = localStorage.getItem("uID")
item = JSON.parse(item);
var obj = $scope.data.find(function(o){
return o.id === item.id
})
// add this lines
$scope.image =(obj)? obj.path : "invalid id";
if(item.id == 4){
localStorage.removeItem("uIDs");
item.id = 0;
}
item.id = item.id +1 ;
This is My Html 这是我的HTML
<body>
<div ng-app="app" ng-controller="ctrl">
{{image}}
<button ng-click="clear()">clear</button>
</div>
</body>
Here is working plunker https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview 这是工作的朋克https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview
2 个解决方案
解决方案1
2 2017-03-27 04:53:24
If I understand your question correctly then you are looking for this,, 如果我正确理解您的问题，那么您正在寻找，
Try this 尝试这个
<!DOCTYPE html> <html> <head> <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> <script type="text/javascript"> angular.module("app",[]) .controller("ctrl",function($scope, $timeout){ $scope.data = [{ "id": 1, "path": "Content/Banner/banner.jpg" }, { "id": 2, "path": "Content/Banner/banner1.jpg" }, { "id": 3, "path": "Content/Banner/banner2.jpg" }, { "id": 4, "path": "Content/Banner/banner3.jpg" }] var k = Math.floor(Math.random() * 4) + 1; $scope.image = $scope.data[k-1].path; var obj = $scope.data[k]; setImage(); function setImage(argument) { $timeout(function () { if (obj.path) { if (obj.id >$scope.data.length) { $scope.image = getImage(obj.id); obj.id = 1; }else{ $scope.image = getImage(obj.id); obj.id ++; } }else{ $scope.image = "invalid id"; } setImage(); }, 5000) }; function getImage(id) { for (var i = $scope.data.length - 1; i >= 0; i--) { if ($scope.data[i].id == id) { return $scope.data[i].path; } } } }) </script> </head> <body> <div ng-app="app" ng-controller="ctrl"> {{image}} <button ng-click="clear()">clear</button> </div> </body> </html>
解决方案2
2 已采纳 2017-03-27 04:54:57
you can use timeout function to show the image after 5 seconds. 您可以使用超时功能在5秒钟后显示图像。
init();
function init(){
for (var i=0;i<=$scope.data.length-1;i++) {
setTime(i)
}
}
function setTime(i){
$timeout(function(){
$scope.image = $scope.data[i].path;
if (i == $scope.data.length-1) {
init()
}
}, (5000 * i));
}
angular.module("app",[]) .controller("ctrl",function($scope,$timeout){ $scope.data = [{ "id": 1, "path": "Content/Banner/banner.jpg" }, { "id": 2, "path": "Content/Banner/banner1.jpg" }, { "id": 3, "path": "Content/Banner/banner2.jpg" }, { "id": 4, "path": "Content/Banner/banner3.jpg" }] init(); function init(){ for (var i=0;i<=$scope.data.length-1;i++) { setTime(i) } } function setTime(i){ $timeout(function(){ $scope.image = $scope.data[i].path; if (i == $scope.data.length-1) { init(); } }, (5000 * i)); } $scope.clear = function(){ debugger localStorage.removeItem("uIDs"); } })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> {{image}} <button ng-click="clear()">clear</button> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.