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

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

broadcast.js

var 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 img:odd").css("display","none");    CarouselFigure.InitAssow($("#CarouselFigure > img:eq(0)"),"prev");    CarouselFigure.InitAssow($("#CarouselFigure > img:eq(2)"),"next");/**    第三部分：        对所有的轮播图进行页面静态布局*/    //初始化某张轮播图的方法    CarouselFigure.InitImages =    function (i,setViewPosData,imageContains){        $("#CarouselFigure ul img:eq("+i+")").css({            position:"absolute",            width:setViewPosData[i].width + "px",            height:setViewPosData[i].height + "px",            top:setViewPosData[i].top + "px",            left:setViewPosData[i].left + "px",            display:"block",            "z-index":setViewPosData[i].zIndex,            opacity:setViewPosData[i].opacity,            }).attr({            src:imageContains[i].src,            href:imageContains[i].href        }).click(function(){            location.href = $(this).attr("href");    //绑定图片点击跳转事件        });        if( (i == 0 || i == 6) && this.type == 'big'){        //第1张图片和第7张图片不可见            $("#CarouselFigure ul img:eq("+i+")").css("display","none");        }else if(i == 3 && this.type == 'big'){                //为正中央图片加边框            $("#CarouselFigure ul img:eq("+i+")").css("border","3px solid #fff");        }else if( (i == 0 || i == 4)&&this.type == 'small'){//第1张图片和第5张图片不可见            $("#CarouselFigure ul img:eq("+i+")").css("display","none");        }else if(i == 2 && this.type == 'small'){            //为正中央图片加边框            $("#CarouselFigure ul img:eq("+i+")").css("border","3px solid #fff");        }    }    /**        实现七张图片的静态样式：            清空原有的li标签，然后新建

登录后复制来存放每张轮播图。    */     $(“#CarouselFigure ul”).empty();    for(var i = 0; i ‘);        CarouselFigure.InitImages(i,CarouselFigure.setViewPosData[CarouselFigure.type],CarouselFigure.imageContains);    } /**    第四部分：        形成轮播动画效果*/        /*    设置clickArrow变量：作为动画的标示位，让其进行队列化，必须本次动画完成，才能进行下次动画轮播。        1. 当为负数时向前轮播，比如：-5向前轮播五次动画；        2. 当为正数时向后轮播，同理；        3. 当等于0时，此时没有进行轮播。    */    CarouselFigure.clickArrow = 0 ;        // 处理动画队列方法：    CarouselFigure.clickArrowfun = function (direction){        if(this.clickArrow == 0){            this.startAnimation(direction);        }        if(direction == “prev”){            this.clickArrow–;        }else if(direction == “next”){            this.clickArrow++;        }    }    /**        开始一次轮播动画            其中composerAnimateNum变量为：                在一次动画中，记录每张轮播图完成的标识符；                在big风格类型中：当其值为6时说明此次动画全部完成                在small风格类型中：当其值为4时说明此次动画全部完成    */     CarouselFigure.startAnimation = function(direction){        this.completeAnimationNum = 0;        if(direction == “prev”){        //从最后一张图片到第一张轮播图片，分别向前移动，首先让最后一张图片可视                if(this.type == “big”){                $(“#CarouselFigure ul img:eq(6)”).css(“display”,”block”);            }else{                $(“#CarouselFigure ul img:eq(4)”).css(“display”,”block”);            }            for(var i = this.setViewPosData[this.type].length – 1 ; i > 0; i –){                this.startMove(i, this.setViewPosData[this.type][i],this.setViewPosData[this.type][i-1],direction);            }        }else if(direction == “next”){//从第一张图片到倒数第二张图片，分别向后移动，首先让第一张轮播图片可视            $(“#CarouselFigure ul img:eq(0)”).css(“display”,”block”);            for(var i = 0 ; i  0){                this.startAnimation(direction);            }else if(this.clickArrow 

broadcast.html

nbsp;html>                                    *{        padding:0px;        margin:0px;    }    ul{        list-style:none;    }    body{        background:#eee;        padding:10px;    }    #CarouselFigure{            }                
                                                                        
                
                
                
                
                
                
                
                
            
        
        $(function(){        //对轮播图进行初始化        CarouselFigure.init({type:'small',comsumeTime:1000});        CarouselFigure.start();    })

登录后复制

实现效果

相关推荐：

怎么用简单的js代码实现轮播图滚动效果？

koa-router是什么？详解koa-router的大致结构与运行流程

以上就是js实现图片轮播的代码实例（详细代码）的详细内容，更多请关注【创想鸟】其它相关文章！