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="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>

时间: 2024-08-10 15:27:34

amaze UI 多图轮播的效果的相关文章

JS实现焦点图轮播效果

大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到欣慰 ! 好吧,其实说白了就是穷,就是没钱,就是不能好好地任性,所以只能先去慕课网找教程学习把它给做出来! OK,首先将HTML结构搭建好先: <div id="container"> <div id="list" style="left:

Objective-C UI之自定义轮播图控件

下面我们自定义一个轮播图类ImageLoop继承于UIView,类ImageLoop中包含一个UIScrollView和UIPageControl,其中定义三个属性: pageControll,position,currentPage可以自定义pageControl样式,也可以使用position控制播放方向,或者设置从下标为currentPage的图片开始播放 下面是ImageLoop的接口文件: #import <UIKit/UIKit.h> typedef enum{Left,Right

[Jquery]焦点图轮播效果

$(function(){    var $next=$(".right");    var $prev=$(".left");    var $list_num=$(".list-num a");    var $banner=$(".banner");    var $list_banner=$(".list-banner");    var index=1;    var timer;    var

案例:焦点图轮播特效

案例:焦点图轮播特效 案例:焦点图轮播特效 案例:固定边栏滚动特效 案例:固定边栏滚动特效 案例:弹出层效果 案例:弹出层效果 案例:分页页码制作 案例:分页页码制作案例:焦点图轮播特效,布布扣,bubuko.com

iOS开发UI篇—无限轮播(功能完善)

iOS开发UI篇—无限轮播(功能完善) 一.自动滚动 添加并设置一个定时器,每个2.0秒,就跳转到下一条. 获取当前正在展示的位置. 1 [self addNSTimer]; 2 } 3 4 -(void)addNSTimer 5 { 6 // NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repe

KinSlideshow焦点图轮播插件

KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时不显示按钮,但也会有无缝切换效果 * jquery 1.7.2以上版本 jvascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) HTML: <div id="KinSlideshow" style="visibility:hidden;"> <

Android之——史上最简单图片轮播广告效果实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913 如今的Android开发需求越来越来多,实现效果越来越酷炫,很多Android APP都要实现PC网站上那样的图片轮播效果,那么,这些图片的轮播效果是如何实现的呢?下面,我就跟大家一起来实现这些酷炫的功能. 一.原理 首先,将这些要轮播的图片和一些文本分别放置在不同的数据集合中,程序启动的时候默认显示一组图片和文本数据,然后启动一个定时器,每隔一段时间便替换掉显示的

JQuery图片轮播滚动效果(网页效果--每日一更)

今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:http://webfront.verynet.cc/pc/index.html 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的后面,详细请看代码. HTML结构代码如下: 1 <div class="content"> 2 <div class="box"> 3 /*滚动的盒子*/ 4 <ul id

一个精悍的拥有一大波焦点图轮播滑动特效的Js程序——bxSlider

打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码) bxSlider官网http://bxslider.com/