Angularjs 实现一个幻灯片示例代码

更新时间：2016年09月08日 15:46:53 投稿：lqh

本文主要介绍Angularjs 写一个幻灯片的知识，这里整理了详细的资料，及实现代码和实现效果图有需要的小伙伴可以参考下

基于angularjs制作的幻灯片

演示地址

npm方式安装

npm install angularjsSlider

使用方法

第一步（引入）

require('angularjsSlider')(moduleName);//引入

第二步（参数配置）

	类型	说明
data	Array	幻灯片图片数据 [{img: "1.jpg",link:'#'}...]
timer	Number	幻灯片切换间隔timer="2"
btn-left	String	左侧切换按钮btn-left="#btnleft"
btn-right	String	右侧切换按钮btn-right=".btnright"
animate-type	String	切换动画方式animate-type="ease"
animate-time	String	切换动画时间animate-time="1.0"秒

第三步（插入标签）

<slider></slider>//插入html标签

<div class="sliderBox" ng-controller="firstCtrl">
    <slider timer="2" data="data" btn-left="#btnleft" btn-right=".btnright" animate-type="ease" animate-time="1.0">
    </slider>
    <div class="btn left" id="btnleft"></div>
    <div class="btn right btnright"></div>
  </div>

var myModule = angular.module('myApp',[]);
  myModule.controller('firstCtrl', function($scope) {
    $scope.data = [{img: "../img/1.jpg",link:"#"}];
  });

以上就是对AngularJS 的实现幻灯片资料，后续继续整理相关知识，谢谢大家对本站的支持！

您可能感兴趣的文章:

Angular 模块封装概念常见的错误分析理解
这篇文章主要为大家介绍了Angular模块封装概念常见的错误分析理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
Angular 4.0学习教程之架构详解
作为一种大受欢迎的Web应用程序框架,Angular终于迎来了版本4.0，下面这篇文章主要给大家介绍了关于Angular 4.0学习教程之架构的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
angular2 ng build部署后base文件路径问题详细解答
本篇文章主要介绍了angular2 ng build部署后base文件路径问题详细解答，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
AngularJS入门教程之AngularJS模型
这篇文章主要介绍了AngularJS入门教程之AngularJS模型的相关资料,需要的朋友可以参考下
2016-04-04
angular实现IM聊天图片发送实例
本篇文章主要介绍了angular实现IM聊天图片发送实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
详解AngularJS中自定义过滤器
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等
2015-12-12
angular ng-click防止重复提交实例
本篇文章主要介绍了angular ng-click防止重复提交实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
详解angular分页插件tm.pagination二次触发问题解决方案
这篇文章主要介绍了详解angular分页插件tm.pagination二次触发问题解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Angular JS 生成动态二维码的方法
这篇文章主要介绍了Angular JS 生成动态二维码的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
Angular angular-file-upload文件上传的示例代码
这篇文章主要介绍了Angular angular-file-upload文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08