zoukankan      html  css  js  c++  java
  • angularjs指令实现轮播图----swiper

    'use strict';
        angular.module('app').directive('swipersLbt',swipers);
            swipers.$inject = ['$timeout'];
            function swipers($timeout) {
                return {
                    restrict: "EA",
                    scope: {
                        data:"="
                    },
                    template: '<div class="swiper-container silder">'+
                                    '<div class="swiper-wrapper">'+
                                    '<div class="swiper-slide" ng-repeat="item in data">'+
                                    '<a class="" href="{{item.openurl}}"><img ng-src="{{item.imgurl}}" alt="{{item.alt}}" /><span ng-show="item.recom">{{item.recom}}</span></a>'+
                                    '</div>'+
                                    '</div>'+
                                    '<div class="swiper-pagination"></div>'+
                                    '</div>',
                    link: function(scope, element, attrs) {
                              $timeout(function(){
                                     var swiper = new Swiper('.swiper-container', {   
                                             loop: true,             
                                            autoplay: {
                                              delay: 2500,
                                              disableOnInteraction: false,
                                            },
                                            pagination: {
                                                el: '.swiper-pagination',
                                                   clickable: true
                                               }
                                    });  
                             },100); 
                    }
                };
            }

    调用:<swipers-lbt data="lbts"></swipers-lbt>

    lbts:

    $scope.lbts=[
             {
                 imgurl:'image/banner_0.jpg',
                 alt:'第1张alt',
                 openurl:"https://www.baidu.com",
                 recom:"推 荐"
             },{
                 imgurl:'image/banner_1.jpg',
                 alt:'第2张alt',
                 openurl:"https://www.baidu.com",
                 recom:""
             }
         ];
  • 相关阅读:
    hdu 2003 求绝对值
    hdu 2002 计算球体积
    hdu 2000 ASCII码排序
    hdu 2001 计算两点间的距离
    hdu 2055 An easy problem
    hdu 1000+1089~1096 题解
    hdu 3233 Download Manager
    GIL 全局解释器锁
    多线程,代码示例
    多线程,理论部分
  • 原文地址:https://www.cnblogs.com/chenlw/p/9480981.html
Copyright © 2011-2022 走看看