首页 > 代码库 > 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=‘{&quot;animation&quot;:&quot;slide&quot;,&quot;animationLoop&quot;:false,&quot;itemWidth&quot;:200,&quot;itemMargin&quot;: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 多图轮播的效果