cmp.sliders 类

方法

方法

addNew

addNew
(
  • imgs
)

定义于 doc\doc\cmp_doc_all\cmp-slider-doc.js:23

轮播图片，并可以放大缩小，进行图片下载

参数:

名称类型标识描述
imgs Array 必选

需要被轮播的图片的指定格式的对象集合
其中图片对象格式为:{small:"http://xxxxx",big:"http://XXXX"}
说明：small为图片的小图地址，big:为图片的大图地址，小图地址是默认显示的，大图地址需要点击【查看大图】才进行大图的查看
注意：该方法需要和detect方法共用，如果不调用detect方法，默认是从第一张图片进行轮播

示例:

<div class="cmp-content">
    <div class="cmp-control-content cmp-active">
        <div id="scroll" class="  cmp-scroll-wrapper">
            <div class="cmp-scroll">
                <div class="imgGroup1" id="imgGroup1">
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="img/changtu2.jpg" width="60px" height="60px" big="img/changtu2.jpg">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="img/dazhechaye.jpg" width="60px" height="60px" big="img/changtu.jpg">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="img/heicha.jpg" width="60px" height="60px" big="img/heicha_datu.jpg">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="img/mm.jpeg" width="80px" height="80px" big="img/chayang_datu.jpg">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="img/1.png" width="70px" height="60px" big="img/dazhechaye_datu">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="img/2.png" width="60px" height="60px" big="img/chayang_datu.jpg">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="img/3.png" width="60px" height="60px" big="img/heicha_datu.jpg">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="http://img1.imgtn.bdimg.com/it/u=1897355986,2914710187&fm=21&gp=0.jpg" width="40px" height="60px" big="img/heicha_datu.jpg">；这个是茶叶的第一张图片
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <!--<img src="http://www.qqpk.cn/Article/UploadFiles/201411/20141116135722282.jpg" width="60px" height="60px">；这个是茶叶的第一张图片-->
                    </div>
                    <div>这是一个正文中有图片，可以点击其进行查看的一个demo，如这里的第一张图片
                        <img src="http://img.xgo-img.com.cn/pics/1709/1708070.jpg" width="90px" height="60px" big="img/chayang_datu.jpg">；这个是茶叶的第一张图片
                    </div>
                </div>
                <div class="imgGroup2" id="imgGroup2">
                    <div>第二组轮播图片
                        <img src="http://img3.imgtn.bdimg.com/it/u=1318515186,1651258251&fm=21&gp=0.jpg" width="90px" height="60px">；这个是茶叶的第一张图片
                    </div>
                    <div>第二组轮播图片
                        <img src="http://ww2.sinaimg.cn/large/4e25c6f9jw1exq8a524t9j20qo0zk40p.jpg" width="90px" height="60px">；这个是茶叶的第一张图片
                    </div>
                    <div>第二组轮播图片
                        <img src="http://www.zjbf.net/edit/uploadfile/20133/Fl201303130934531821.jpg" width="90px" height="60px">；这个是茶叶的第一张图片
                    </div>
                    <div>第二组轮播图片
                        <img src="http://sc.jb51.net/uploads/allimg/130813/2-130Q3220013I0.jpg" width="90px" height="60px">；这个是茶叶的第一张图片
                    </div>
                    <div>第二组轮播图片
                        <img src="http://ww2.sinaimg.cn/large/4e25c6f9jw1ey081sume6j21kw2dctij.jpg" width="90px" height="60px">；这个是茶叶的第一张图片
                    </div>
                    <div>第二组轮播图片
                        <img src="http://img.taopic.com/uploads/allimg/121105/240508-12110523202613.jpg" width="90px" height="60px">；这个是茶叶的第一张图片
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

<script>
    cmp.ready(function(){
        var groupImgs1Html = document.getElementById("imgGroup1").getElementsByTagName("img");
        var group2Imgs = document.getElementById("imgGroup2").getElementsByTagName("img");
        var group1Imgs = [];
        for(var i = 0;i<groupImgs1Html.length;i++){
            var imgObj = {
                small:groupImgs1Html[i].src,
                big:groupImgs1Html[i].getAttribute("big")
            }
            group1Imgs.push(imgObj)
        }
        cmp.each(groupImgs1Html,function(i,img){
            img.addEventListener("tap",function(e){
                cmp.sliders.addNew(group1Imgs);
                cmp.sliders.detect(i);
            },false);
        });
        cmp.each(group2Imgs,function(j,img){
            img.addEventListener("tap",function(){
                cmp.sliders.addNew(group2Imgs);
                cmp.sliders.detect(j);
            });
        });

    });
</script>

slider

slider ()

定义于 doc\doc\cmp_doc_all\cmp-slider-doc.js:34

轮播图片，可设置手动和自动（需配合html模板和js共同完成）

示例:

//以定义轮播3张图片为例  总共需要定义5个cmp-slider-item，其中首尾的cmp-slider-item是作为轮播的占位符存在的
//首部的占位符应该是轮播顺序的最后一张图片，尾部的占位符应该是轮播顺序的第一张图片（一个首尾循环的模式）
<div class="cmp-content  ">
    <div class="cmp-control-content cmp-active">
        <div id="scroll" class="  cmp-scroll-wrapper">
            <div class="cmp-scroll">
                <ul class="cmp-table-view cmp-table-view-chevron">
                    <li id="switch" class="cmp-table-view-cell">
                        定时轮播
                        <div class="cmp-switch">
                            <div class="cmp-switch-handle"></div>
                        </div>
                    </li>
                </ul>
                <div id="slider" class="cmp-slider"> <!--第一步 轮播图html模板部分-->
                    <div class="cmp-slider-group " >
                        <div class="cmp-slider-item cmp-slider-item-duplicate"> <!--第一个item要加cmp-slider-item-duplicate类-->
                            <a href="#">
                                <img src="../../img/3.jpg">
                                <p class="cmp-slider-title">最后一张图片要作为第一张图片的占位符</p>
                            </a>
                        </div>
                        <div class="cmp-slider-item">
                            <a href="#">
                                <img src="../../img/1.jpg">
                                <p class="cmp-slider-title">第一张图片</p>
                            </a>
                        </div>
                        <div class="cmp-slider-item">
                            <a href="#">
                                <img src="../../img/2.jpg">
                                <p class="cmp-slider-title">第二张图片</p>
                            </a>
                        </div>
                        <div class="cmp-slider-item">
                            <a href="#">
                                <img src="../../img/3.jpg">
                                <p class="cmp-slider-title">第三张图片</p>
                            </a>
                        </div>
                        <div class="cmp-slider-item cmp-slider-item-duplicate"><!--最后一个item需要添加cmp-slider-item-duplicate类-->
                            <a href="#">
                                <img src="../../img/1.jpg">
                                <p class="cmp-slider-title">第一张图片作为结尾的占位符</p>
                            </a>
                        </div>
                    </div>
                    <div class="cmp-slider-indicator cmp-text-right">
                        <div class="cmp-indicator cmp-active"></div>
                        <div class="cmp-indicator"></div>
                        <div class="cmp-indicator"></div>
                        <div class="cmp-indicator"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>

    cmp.ready(function(){
        var slider = cmp("#slider"); //第二步：查询到需要轮播的容器对象
//        var demo=slider.slider();   //第三步：实例化轮播组件
//        demo.initTimer();   //如果是自动轮播，调用此方法
        slider.slider().gotoItem(5);//跳转到第index张图片，index从0开始；
        document.getElementById("switch").addEventListener('toggle', function(e) {
            if (e.detail.isActive) {
                slider.slider({
                    slideshowDelay: 5000,  //自动轮播动画时间
                    interval:5000 //自动轮播周期，若为0则不自动播放，默认为0；
                });
            } else {
                slider.slider({
                    slideshowDelay: 0
                });
            }
        });
    });

    //注：如果html是以模板的方式插入，只需将上面的html代码改成模板代码。当模板代码被插入页面后，再按照上面的第二步、第三步
    //进行调用即可
</script>

图例:

图片轮播器

Top