<!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>