手机端轮播图实现:
对应插件: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 (请用手机访问)