码迷,mamicode.com
首页 > 其他好文 > 详细

amaze UI 多图轮播的效果

时间:2017-07-25 18:10:20      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:com   http   idg   文件   oct   1.0   href   lin   mos   

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="assets/css/amazeui.css" />
  <link rel="stylesheet" href="assets/css/common.min.css" />
  <link rel="stylesheet" href="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="assets/js/jquery-2.1.0.js" charset="utf-8"></script>
  <script src="assets/js/amazeui.js" charset="utf-8"></script>
  <script src="assets/js/common.js" charset="utf-8"></script>
  <script src="assets/js/jquery-2.1.0.js"></script>
 
</body>

</html>





amaze UI 多图轮播的效果

标签:com   http   idg   文件   oct   1.0   href   lin   mos   

原文地址:http://www.cnblogs.com/Yoko-815/p/7235328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!