Amaze■UI照片滚屏实际效果的实例编码

日期:2021-01-20 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

AmazeUI本人觉得的确蛮非常好的,尽管如今还算不上非常健全,但终究是中国第一款,用起來较为合乎中国人。

今日要讲得是照片滚屏,觉得这一应当可以帮上大伙儿,再此梳理梳理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/amazeui.legacy.js"></script>
		<script type="text/javascript" src="js/amazeui.js"></script>
		<script type="text/javascript" src="js/amazeui.widgets.helper.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/handlebars.min.js"></script>
		<script type="text/javascript" src="js/polyfill/rem.min.js"></script>
		<script type="text/javascript" src="js/polyfill/respond.min.js"></script>
		<link rel="stylesheet" href="css/amazeui.css" />
		<link rel="stylesheet" href="css/admin.css" />
		<link rel="stylesheet" href="css/amazeui.flat.css" />
		<link rel="stylesheet" href="css/app.css" />
		<script type="text/javascript">
			$(function(){
				$('.am-slider').flexslider({
					playAfterPaused: 3000,
					animation: "fade",
					animationLoop: true,
					smoothHeight: true,
					animationSpeed: 4000
				});
			}); 
		</script>
	</head>
	<body>
		<div class="am-slider am-slider-default">
			<ul class="am-slides">
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
			</ul>
		</div>
	</body>
</html>

上边引入到的文档实际上能够不用那麼多,但是全是官方网文档中的文档。

关键是控制的特性

{
  animation: "slide",             // String: ["fade"|"slide"],动漫实际效果
  easing: "swing",                // String: 翻转动漫记时涵数
  direction: "horizontal",        // String: 翻转方位 ["horizontal"|"vertical"]
  reverse: false,                 // Boolean: 旋转 slide 健身运动方位
  animationLoop: true,            // Boolean: 是不是循环系统播发
  smoothHeight: false,            // Boolean: 当 slide 照片占比不一样时
                                  // "true": 父类全自动适应照片高宽比
                                  // "false": 不全自动适应,父类高宽比为照片的最大高宽比,默认设置为false

  startAt: 0,                     // Integer: 刚开始播发的 slide,从 0 刚开始计数
  slideshow: true,                // Boolean: 是不是全自动播发
  slideshowSpeed: 5000,           // Integer: ms 翻转间距時间
  animationSpeed: 600,            // Integer: ms 动漫翻转速率
  initDelay: 0,                   // Integer: ms 初次实行动漫的延迟时间
  randomize: false,               // Boolean: 是不是任意 slide 次序

  // Usability features
  pauseOnAction: true,            // Boolean: 客户实际操作时终止全自动播发
  pauseOnHover: false,            // Boolean: 悬停时中止全自动播发
  useCSS: true,                   // Boolean: 是不是应用 css3 transition
  touch: true,                    // Boolean: 容许触碰屏触碰拖动导轨滑块
  video: false,                   // Boolean: 应用视頻的 slider,避免 CSS3 三d 转换毛刺

  // Primary Controls
  controlNav: true,               // Boolean: 是不是建立操纵点
  directionNav: true,             // Boolean: 是不是建立上/下一个按键(previous/next)
  prevText: "Previous",           // String: 上一个按键文本
  nextText: "Next",               // String: 下一个按键文本

  // Secondary Navigation
  keyboard: true,                 // Boolean: 是不是打开电脑键盘左(←)右(→)操纵
  multipleKeyboard: false,        // Boolean: 是不是容许电脑键盘操纵好几个 slide
  mousewheel: true,               // Boolean: 是不是打开电脑鼠标滚轮操纵
  pausePlay: false,               // Boolean: 是不是建立中止与播发按键
  pauseText: 'Pause',             // String: 中止按键文本
  playText: 'Play',               // String: 播发按键文本

  // Special properties
  controlsContainer: "",          // jQuery Object/Selector
  manualControls: "",             // jQuery Object/Selector 自定操纵 slider 的原素,
                                  // 如 "#tabs-nav li img",导航栏总数和 slide 总数一样
  sync: "",                       // Selector: 关系 slide 与 slide 中间的实际操作。
  asNavFor: "",                   // Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

  // Carousel Options
  itemWidth: 0,                   // Integer: slide 总宽,好几个同时翻转时设定
  itemMargin: 0,                  // Integer: slide 间隔
  minItems: 1,                    // Integer: 至少显示信息 slide 数, 与 `itemWidth` 有关
  maxItems: 0,                    // Integer: 数最多显示信息 slide 数, 与 `itemWidth` 有关
  move: 0,                        // Integer: 一次翻转移动的 slide 总数,0 - 翻转由此可见的 slide

  // Callback API
  start: function(){},            // Callback: function(slider) - 原始化进行的回调函数
  before: function(){},           // Callback: function(slider) - 每一次翻转刚开始前的回调函数
  after: function(){},            // Callback: function(slider) - 每一次翻转进行后的回调函数
  end: function(){},              // Callback: function(slider) - 实行到最终一个 slide 的回调函数
  added: function(){},            // Callback: function(slider) - slide 加上时开启
  removed: function(){}           // Callback: function(slider) - slide 被清除时开启

  // Amaze UI 拓展主要参数
  playAfterPaused: null           // Integer: ms 客户终止实际操作多久時间之后再次刚开始全自动播发
}

实际效果以下,很非常好的实际效果,编码也非常少,简易易懂。

到此这篇有关AmazeUI照片滚屏实际效果的实例编码的文章内容就详细介绍到这了,大量有关AmazeUI照片滚屏內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!