• 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>
  • 相关阅读:
    Windows RC版、RTM版、OEM版、RTL版、VOL版的区别
    jQuery MiniUI开发系列之:创建组件对象
    Mobile Web 调试指南(2):远程调试
    Using the viewport meta tag to control layout on mobile browsers
    鼠标滚轮事件MouseWheel
    photoshop基础
    10个jQuery插件分享
    Centos 安装nodejs
    Centos 安装.NET CORE 3.1
    Centos 安装nginx
  • 原文地址:https://www.cnblogs.com/zion0707/p/4846190.html
Copyright © 2020-2023  润新知