天天看点

手机端轮播图插件

手机端轮播图实现:

手机端轮播图插件
手机端轮播图插件

对应插件:af.carousel.js 见附件

使用方法:

手机端轮播图插件

/*** 

 * 

 * @param carouselid 

 * @param carousel_dotsid 

 * @param autoplay : 是否自动播放轮播图 

 * @param iscache : 不传值默认为true 

 */  

function carouselsetup(carouselid, carousel_dotsid, autoplay, iscache) {  

    // set size of carousel  

    $(".carousel").width($(".carousel").closest(".panel").width());  

//    $("#carousel").height($("#carousel").closest(".panel").height()-25);  

    var movecallback = function () {  

        console.log(arguments);  

    }  

    var options={  

        vertical:false, // page up/down  

        horizontal:true, // page left/right  

        pagingdiv:carousel_dotsid, // div to hold the dots for paging  

        pagingcssname:"carousel_paging", //classname for the paging dots  

        pagingcssnameselected: "carousel_paging_selected", //classname for the selected page dots  

        wrap:true, //creates a continuous carousel  

        oktomove:true,  

        pagingdotdivheight:'10px',  

        //iscache: false,  

        movecallback2/* this.carouselindex, this.mydivheight, this.mydivwidth, this.el.children */: movecallback,  

        autotransitionintervaltime:4000  

    if (arguments.length > 3 && !iscache) {  

        options.iscache = false;  

    var carousel = $("#"+carouselid).carousel(options);  

    if(arguments.length>2&&autoplay){  

        carousel.switchauto();//自动播放  

}  

手机端轮播图插件

carouselsetup("pic_news_carousel", "carousel_dots_picnews", false, false);  

手机端轮播图插件
手机端轮播图插件

carouselsetup("index_carousel","carousel_dots",true);//轮播图  

实例:http://123.57.250.51/ios_www/www/index.html (请用手机访问)

继续阅读