手机端轮播图实现:
对应插件:af.carousel.js 见附件
使用方法:
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();//自动播放
- }
- }
Js代码
- carouselSetup("pic_news_carousel", "carousel_dots_picnews", false, false);
Js代码
- carouselSetup("index_carousel","carousel_dots",true);//轮播图
实例:http://123.57.250.51/ios_www/www/index.html (请用手机访问)
