这里创建了一个页面形象改变而页面刷新。
从这个问题在 angularJS 中刷新页面时更改图像 https://stackoverflow.com/questions/42948044/change-image-when-page-refresh-in-angularjs/42948767#42948767。现在我需要改变图像 自动地5秒后，这意味着页面刷新或图像不想要改变。我如何通过实现以下代码来解决这个问题。请帮我...
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>
这是正在工作的笨蛋https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview
您可以使用超时功能在 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
