手机端轮播图插件

手机端轮播图实现:

 

 

 

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

 

使用方法:

Js代码  

1. /*** 
2.  * 
3.  * @param carouselId 
4.  * @param carousel_dotsId 
5.  * @param autoPlay : 是否自动播放轮播图 
6.  * @param isCache : 不传值默认为true 
7.  */  
8. function carouselSetup(carouselId, carousel_dotsId, autoPlay, isCache) {  
9.     // set size of carousel  
10.     $(".carousel").width($(".carousel").closest(".panel").width());  
11. //    $("#carousel").height($("#carousel").closest(".panel").height()-25);  
12.     var moveCallback = function () {  
13.         console.log(arguments);  
14.     }  
15.     var options={  
16.         vertical:false, // page up/down  
17.         horizontal:true, // page left/right  
18.         pagingDiv:carousel_dotsId, // div to hold the dots for paging  
19.         pagingCssName:"carousel_paging", //classname for the paging dots  
20.         pagingCssNameSelected: "carousel_paging_selected", //classname for the selected page dots  
21.         wrap:true, //Creates a continuous carousel  
22.         okToMove:true,  
23.         pagingDotDivHeight:'10px',  
24.         //isCache: false,  
25.         moveCallback2/* this.carouselIndex, this.myDivHeight, this.myDivWidth, this.el.children */: moveCallback,  
26.         autoTransitionIntervalTime:4000  
27.     }  
28.     if (arguments.length > 3 && !isCache) {  
29.         options.isCache = false;  
30.     }  
31.     var carousel = $("#"+carouselId).carousel(options);  
32.     if(arguments.length>2&&autoPlay){  
33.         carousel.switchAuto();//自动播放  
34.     }  
35. }  

 

Js代码  

1. carouselSetup("pic_news_carousel", "carousel_dots_picnews", false, false);  

 

 

Js代码  

1. carouselSetup("index_carousel","carousel_dots",true);//轮播图  

 

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