angularJS：页面刷新时更改图像。否则（如果没有刷新）想要在5秒内自动更改 [英] angularJS: Change Image when Page Refresh. otherwise (if not refreshed) want to change automatically in 5 sec
问题描述
在页面刷新时创建了一个图像更改的页面。来自此SO问题的
在页面刷新时更改图像angularJS 。现在我需要在5秒后自动更改图像 ，这意味着页面刷新或图像不想更改。如何通过实现以下代码来解决此问题。请帮帮我...
Here am created one page with Image changing while the page refresh. from this SO question Change Image when Page Refresh in angularJS. Now i need to change the image automatically after the 5 seconds, which means the page refreshed or not the image want to change. 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 ;
这是我的Html
<body>
<div ng-app="app" ng-controller="ctrl">
{{image}}
<button ng-click="clear()">clear</button>
</div>
</body>
这是工作的plunker https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview
Here is working plunker https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview
推荐答案
你可以使用超时功能在5秒后显示图像。
you can use timeout function to show the image after 5 seconds.
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>
这篇关于angularJS：页面刷新时更改图像。否则（如果没有刷新）想要在5秒内自动更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
