小编给大家分享一下在html5中如何使用AmazeUI实现图片轮播效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

图片轮播

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/amazeui.legacy.js"></script><scripttype="text/javascript"src="js/amazeui.js"></script><scripttype="text/javascript"src="js/amazeui.widgets.helper.js"></script><scripttype="text/javascript"src="js/app.js"></script><scripttype="text/javascript"src="js/handlebars.min.js"></script><scripttype="text/javascript"src="js/polyfill/rem.min.js"></script><scripttype="text/javascript"src="js/polyfill/respond.min.js"></script><linkrel="stylesheet"href="css/amazeui.css"/><linkrel="stylesheet"href="css/admin.css"/><linkrel="stylesheet"href="css/amazeui.flat.css"/><linkrel="stylesheet"href="css/app.css"/><scripttype="text/javascript">$(function(){$('.am-slider').flexslider({playAfterPaused:3000,animation:"fade",animationLoop:true,smoothHeight:true,animationSpeed:4000});});</script></head><body><divclass="am-slideram-slider-default"><ulclass="am-slides"><li><imgsrc="img/1.jpg"></li><li><imgsrc="img/2.jpg"></li><li><imgsrc="img/3.jpg"></li><li><imgsrc="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":不自动适应，父类高度为图片的最高高度，默认为falsestartAt:0,//Integer:开始播放的slide，从0开始计数slideshow:true,//Boolean:是否自动播放slideshowSpeed:5000,//Integer:ms滚动间隔时间animationSpeed:600,//Integer:ms动画滚动速度initDelay:0,//Integer:ms首次执行动画的延迟randomize:false,//Boolean:是否随机slide顺序//UsabilityfeaturespauseOnAction:true,//Boolean:用户操作时停止自动播放pauseOnHover:false,//Boolean:悬停时暂停自动播放useCSS:true,//Boolean:是否使用css3transitiontouch:true,//Boolean:允许触摸屏触摸滑动滑块video:false,//Boolean:使用视频的slider，防止CSS33D变换毛刺//PrimaryControlscontrolNav:true,//Boolean:是否创建控制点directionNav:true,//Boolean:是否创建上/下一个按钮（previous/next）prevText:"Previous",//String:上一个按钮文字nextText:"Next",//String:下一个按钮文字//SecondaryNavigationkeyboard:true,//Boolean:是否开启键盘左（←）右（→）控制multipleKeyboard:false,//Boolean:是否允许键盘控制多个slidemousewheel:true,//Boolean:是否开启鼠标滚轮控制pausePlay:false,//Boolean:是否创建暂停与播放按钮pauseText:'Pause',//String:暂停按钮文字playText:'Play',//String:播放按钮文字//SpecialpropertiescontrolsContainer:"",//jQueryObject/SelectormanualControls:"",//jQueryObject/Selector自定义控制slider的元素，//如"#tabs-navliimg"，导航数量和slide数量一样sync:"",//Selector:关联slide与slide之间的操作。asNavFor:"",//Selector:Internalpropertyexposedforturningthesliderintoathumbnailnavigationforanotherslider//CarouselOptionsitemWidth:0,//Integer:slide宽度，多个同时滚动时设置itemMargin:0,//Integer:slide间距minItems:1,//Integer:最少显示slide数,与`itemWidth`相关maxItems:0,//Integer:最多显示slide数,与`itemWidth`相关move:0,//Integer:一次滚动移动的slide数量，0-滚动可见的slide//CallbackAPIstart: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被移除时触发//AmazeUI扩展参数playAfterPaused:null//Integer:ms用户停止操作多长时间以后重新开始自动播放}

以上是“在html5中如何使用AmazeUI实现图片轮播效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！