php轮播图代码_js实现图片轮播的代码实例（详细代码）

本篇文章给大家带来的内容是关于js实现图片轮播的代码实例(详细代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

broadcast.jsvar CarouselFigure = new Object();

//轮播图初始化定义函数

CarouselFigure.init = function(tmpobj){

//定义动画帧数(默认为：30)

this.frameNum = tmpobj.frameNum !=undefined ? tmpobj.frameNum : 30;

//定义一次轮播的时间(默认为：0.2s)

this.comsumeTime = tmpobj.comsumeTime !=undefined ? tmpobj.comsumeTime : 200;

//定义轮播图的宽高(默认宽高为：700px * 250px)

this.CFWidth = tmpobj.CFWidth !=undefined ? tmpobj.CFWidth : 700;

this.CFHeight = tmpobj.CFHeight !=undefined ? tmpobj.CFHeight : 250;

//定义轮播的风格

this.type = tmpobj.type == "small" ? 'small' : 'big';

//轮播图的按钮大小的宽高

this.AssowWidth = tmpobj.AssowWidth !=undefined ? tmpobj.AssowWidth : 76;

this.AssowHeight = tmpobj.AssowHeight !=undefined ? tmpobj.AssowHeight : 112;

//判断用户是否初始化

this.initFlag = true;

//是否允许轮播图运行

this.applicationflag = true;

}

CarouselFigure.start = function(){

/**

第一部分类容：初始化整个轮播图和其运行数据

*/

(function(){

//1. 判断用户是否进行初始化

if(CarouselFigure.initFlag == undefined){

CarouselFigure.init({});

}

//2.1 初始化整个轮播图的div的基本大小

$("#CarouselFigure").width(CarouselFigure.CFWidth).height(CarouselFigure.CFHeight).css("position","relative");

//2.2 最中央的大图实际大小为:

CarouselFigure.ImgWidth = CarouselFigure.CFWidth * 2/3;

CarouselFigure.ImgHeight = CarouselFigure.CFHeight - 6;

//3. 初始化轮播图按钮数据

CarouselFigure.setAssowdata = {

prev:{

top:(CarouselFigure.CFHeight - CarouselFigure.AssowHeight)/2 +"px",

left:CarouselFigure.CFWidth/6 - CarouselFigure.AssowWidth + 6 + "px",

originUrl:$("#CarouselFigure > img:eq(0)").attr("src"),

hoverUrl:$("#CarouselFigure > img:eq(1)").attr("src"),

},

next:{

top:(CarouselFigure.CFHeight - CarouselFigure.AssowHeight)/2 +"px",

left:CarouselFigure.CFWidth*5/6 + "px",

originUrl:$("#CarouselFigure > img:eq(2)").attr("src"),

hoverUrl:$("#CarouselFigure > img:eq(3)").attr("src"),

}

};

//4.1 初始化轮播图的url和src信息，存放到一个容器中

CarouselFigure.imageContains = [];

$("#CarouselFigure ul li img").each(function(){

var tmpobj = {src:$(this).attr("src"),href:$(this).attr("href")}

CarouselFigure.imageContains.push(tmpobj);

});

//4.2 对轮播图容器数据进行处理,当轮播图的个数3<= x <= 5 只能使用small风格类型。当轮播图的个数 x < 3 时， 停止运行

if(CarouselFigure.imageContains.length < 3){

CarouselFigure.applicationflag = false;

}else if(CarouselFigure.imageContains.length < 6){

CarouselFigure.type = 'small';

}

//4.3 对轮播容器数据按顺序进行增倍，保证有足够数据进行轮播

var objstr = JSON.stringify(CarouselFigure.imageC