AngularJS 图片滚动展示插件带左右控制 ng-imgshow.js

2016/07/28 浏览数(2,890) 分类：AngularJS 已关闭评论

效果预览：

用法：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>imgshow</title>
<!-- 代码开始 1/2 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/imgshow.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/ngImgshow.js"></script>
<!-- 代码结束 1/2 -->
<style>
.panel {margin-top: 30px;}
.panel-heading .btn-group {float: right;}
</style>
</head>
<body ng-controller="ctrl">
	<div class="container">
		<div class="row">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">图片滚动展示 imgshow</h3>
				</div>
				<div class="panel-body">
					<!-- 代码开始 2/2 -->
					<div imgshow="imgshow" imgs="imgArr" delay="2000" speed="500"></div>
					<!-- 代码结束 2/2 -->
				</div>
				<div class="panel-footer">[imgshow=""]的父容器的宽度不限并且父容器可以随时调整大小。</div>
			</div>
		</div>
	</div>
</body>
</html>

下载地址：

下载：ng-imgshow.zip

注意：

这个插件是为一个 AngularJS + jQuery + bootstrap 项目做的，因了使用了 box-sizing 所以兼容性不好。另外，宽度不足时只显示当前审核到的进度项，其它项只显示圆圈。