angularJS 移动端焦点图
2015-09-29 14:03
281 查看
<!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>
相关文章推荐
- iOS开发——音频篇——音效的播放
- ios 公共类的合理使用
- android自动升级应用实现
- Android -- Properties使用
- iOS9下企业证书打包app的验证过程[图文说明]
- IOS单元测试的扩展工具OCHamcrest
- 【VLC-Android】vlc-android简例
- Cocos2dx-3.x csloader 加载
- ios开发过程中的一些笔记,不断更新中。。。
- Android调用浏览器打开网址遇到的问题
- (转)iOS9开发之新增通知行为详解
- Cocostudio的菜单操作
- Android开发中出现异常问题的积累
- webview
- 六款值得推荐的android(安卓)开源框架简介
- 一个百度定位例子,把自己的经纬度转换为具体位置
- ndk-gdb of NDK r9d modified to *always* debug the ":remote"-process of your app
- android:EditText属性/去边框
- IOS声明时使用的类型区别
- Android-创建带单选项列表的对话框