手機端輪播圖實作:
對應插件: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 (請用手機通路)