AngularJS移動端焦点図
27504 ワード
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi, user-scalable=yes">
<style>
*{padding:0;margin:0;}
ul,li{list-style: none;}
img{border:none;outline: none;}
.shuffling{
width:100%;
height:200px;
overflow: hidden;
position: relative;
}
.list{
width:100%;
height:200px;
position: absolute;
transition-duration:.5s;
top:0;
}
.list li{
height:100%;
float:left;
}
.list li img{
display: block;
margin:0 auto;
}
.btn-wrap{
width:100%;
height:10px;
bottom:10px;
position: absolute;
}
.btn{
text-align: center;
}
.btn li{
display:inline-block;
width:8px;
height:8px;
background-color:#ddd;
margin:0 5px;
}
.btn .current{
background-color:red;
}
</style>
</head>
<body ng-controller="MyCtrl as mbox">
<div class="shuffling">
<ul class="list" style="width:{{mbox.first.winWidth * mbox.first.shufflingData.length}}px;left:-{{mbox.first.indexNum * mbox.first.winWidth}}px;" ng-swipe-left="mbox.first.shufflingLeft()" ng-swipe-right="mbox.first.shufflingRight()">
<li style="width:{{mbox.first.winWidth}}px" ng-repeat="shufflingData in mbox.first.shufflingData track by $index"><a ng-href="{{shufflingData.url}}"><img ng-src="{{shufflingData.img}}"></a></li>
</ul>
<div class="btn-wrap">
<ul class="btn">
<li ng-repeat="shufflingData in mbox.first.shufflingData track by $index" ng-class="{current:$index==mbox.first.indexNum}"></li>
</ul>
</div>
</div>
<script src="static/angular/angular.js"></script>
<script src="static/angular/angular-touch.js"></script>
<script>
var myApp = angular.module('myApp', ['ngTouch'] );
//
myApp.service('Data', [function(){
return {
shufflingData : [
{
id : 0 ,
url : 'http://www.sina.com',
img : 'static/images/01.jpg'
} ,
{
id : 1 ,
url : 'http://www.qq.com',
img : 'static/images/02.jpg'
} ,
{
id : 2 ,
url : 'http://www.sina.com',
img : 'static/images/03.jpg'
}
]
}
}]);
myApp.controller('MyCtrl', ['$scope','$window', 'Data' , function($scope , $window , Data){
var mbox = this;
//
mbox.first = {};
mbox.first.winWidth = $window.innerWidth;
mbox.first.shuffling = (function()
{
mbox.first.shufflingData = Data.shufflingData;
mbox.first.indexNum = 0;
//
mbox.first.shufflingLeft = function(){
if ( mbox.first.indexNum == mbox.first.shufflingData.length - 1 ) {
mbox.first.indexNum = mbox.first.shufflingData.length - 1 ;
}else{
mbox.first.indexNum++;
}
};
//
mbox.first.shufflingRight = function(){
if ( mbox.first.indexNum == 0 ) {
mbox.first.indexNum = 0 ;
}else{
mbox.first.indexNum--;
}
}
})();
}]);
</script>
</body>
</html>