AmazeUI图片轮播自动播放 - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

自动播放 AmazeUI 图片轮播

打开边栏(ESC) 关闭边栏(ESC)

文章来自网络，我要了解的就是控制图片自动播放的属性，slideshow: true

实际运用中可以这样data-am-slider='{"controlNav":false,"slideshow": true}'

<div data-am-widget="slider" class="am-slider am-slider-b2" data-am-slider='{"controlNav":false,"slideshow": true}' >
  <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>
  </ul>
</div>

==========================================================

以下来自网络

今天要讲得是图片轮播，感觉这个应该能够帮到大家，再此整理整理。

<!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 3D 变换毛刺

// 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 用户停止操作多长时间以后重新开始自动播放
}

效果如下，很不错的效果，代码也很少，简单易懂。

from clipboard

赏

前一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

amazeUI下拉组件中下拉框上方小三角的颜色在哪里修改