手机端轮播图插件

手机端轮播图实现:

?

?

?

对应插件: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 (请用手机访问)

?

?

?

手机端轮播图插件

原文：http://hw1287789687.iteye.com/blog/2241452