首页 > 代码库 > amaze UI 多图轮播的效果
amaze UI 多图轮播的效果
css文件和js文件自行下载
相关链接：http://amazeui.org/javascript/scrollspy?_ver=2.x#shi-yong-yan-shi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="http://www.mamicode.com/assets/css/amazeui.css" />
<link rel="stylesheet" href="http://www.mamicode.com/assets/css/common.min.css" />
<link rel="stylesheet" href="http://www.mamicode.com/assets/css/index.min.css" />
<style>
.am-slider-carousel li {
margin-right: 5px;
}
</style>
</head>
<body>
<div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider=‘{"animation":"slide","animationLoop":false,"itemWidth":200,"itemMargin":5}‘ >
<ul class="am-slides">
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
</li>
<li data-thumb="http://s.amazeui.org/media/i/demos/bing-2.jpg">
<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
</li>
<li>
<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
</li>
</ul>
</div>
<script src="http://www.mamicode.com/assets/js/jquery-2.1.0.js" charset="utf-8"></script>
<script src="http://www.mamicode.com/assets/js/amazeui.js" charset="utf-8"></script>
<script src="http://www.mamicode.com/assets/js/common.js" charset="utf-8"></script>
<script src="http://www.mamicode.com/assets/js/jquery-2.1.0.js"></script>
</body>
</html>
amaze UI 多图轮播的效果