angularJS 移动端焦点图

<!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="{{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="{{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>

相关阅读:
demo_10_02 云数据库聚合_bucket_02 bucketAuto
demo_10_02 云数据库聚合_bucket_01
nginx 启动脚本
 grep 全局搜索打印命令
 ulimit shell启动进程所占用的资源命令
 nginx 一键安装
 安装 nginx
学习笔记::杜教筛
 markdown测试
 bzoj4589
原文地址：https://www.cnblogs.com/zion0707/p/4846190.html