利用Angularjs实现幻灯片效果

更新时间：2016年09月07日 10:36:59 投稿：daisy

AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。下面这篇文章我们来分享如何利用Angularjs实现幻灯片效果。

前言

Jquery发展至今,幻灯组件已经非常成熟，所以下面小编带大家一起看看利用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:"#"}];
  });

总结

以上就是这篇文章的全部内容，希望这篇文章对大家能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

Angular使用动态加载组件方法实现Dialog的示例
这篇文章主要介绍了Angular使用动态加载组件方法实现Dialog的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
AngularJS 入门教程之事件处理器详解
本文主要介绍AngularJS 事件处理器,这里整理了相关资料和示例代码，有需要的小伙伴可以参考下
2016-08-08
关于AngularJS中几种Providers的区别总结
这篇文章主要给大家介绍了关于AngularJS中几种Providers的区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用AngularJS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2020-05-05
angularjs封装bootstrap时间插件datetimepicker
这篇文章主要介绍了angularjs封装bootstrap时间插件datetimepicker 的相关资料,需要的朋友可以参考下
2016-06-06
Angular resolve基础用法详解
resolve保证了数据获取后再进行路由跳转，防止因为数据延迟而出现短暂的空组件情况，本文就介绍一下Angular resolve基础用法，感兴趣的小伙伴们可以参考一下
2018-10-10
Angular中$cacheFactory的作用和用法实例详解
$cacheFactory是一个为Angular服务生产缓存对象的服务。接下来通过本文给大家介绍Angular中$cacheFactory的作用和用法实例详解，非常不错，感兴趣的朋友一起看下吧
2016-08-08
AngularJs Understanding the Model Component
本文主要介绍AngularJs Understanding the Model Component的内容，这里整理了相关资料，并详细讲解了这部分知识，有兴趣的小伙伴可以参考下
2016-09-09
AngularJS 输入验证详解及实例代码
本文主要介绍AngularJS 输入验证,这里对AngularJS 输入验证的资料做了整理,并附简单实例代码和效果图,有需要的小伙伴参考下
2016-07-07
Angular.js 4.x中表单Template-Driven Forms详解
Angular 4.x 中有两种表单，一种是Template-Driven Forms - 模板驱动式表单，另外一种是Reactive Forms - 响应式表单，下面这篇文章主要给大家介绍了Angular.js 4.x中表单Template-Driven Forms的相关资料，需要的朋友可以参考学习，下面来一起看看吧。
2017-04-04
AngularJS中实现动画效果的方法
本文主要介绍AngularJS 动画,这里对动画的资料详细介绍并附有效果图和代码实例,有需要的小伙伴参考下
2016-07-07