本篇文章给大家带来的内容是关于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<= 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.imagecontains); carouselfigure.imagecontains = carouselfigure.imagecontains.concat(json.parse(objstr)); //5.1 轮播图使用big风格时，页面七张图在静态页面中的属性值 carouselfigure.setviewposdata = new object; carouselfigure.setviewposdata.big = [ { width:carouselfigure.imgwidth*3/8, height:carouselfigure.imgheight*3/8, left:0, top:0, zindex:1, opacity:0.2, bordersize:0 },{ width:carouselfigure.imgwidth*3/8, height:carouselfigure.imgheight*3/8, left:0, top:carouselfigure.cfheight*5/16, zindex:2, opacity:0.7, bordersize:0 },{ width:carouselfigure.imgwidth*3/4, height:carouselfigure.imgheight*3/4, left:carouselfigure.cfwidth/18, top:carouselfigure.cfheight/8, zindex:3, opacity:0.9, bordersize:0 },{ width:carouselfigure.imgwidth, height:carouselfigure.imgheight, left:carouselfigure.cfwidth/6, top:0, zindex:4, opacity:1, bordersize:3 },{ width:carouselfigure.imgwidth*3/4, height:carouselfigure.imgheight*3/4, left:carouselfigure.cfwidth * 4/9, top:carouselfigure.cfheight/8, zindex:3, opacity:0.9, bordersize:0 },{ width:carouselfigure.imgwidth*3/8, height:carouselfigure.imgheight*3/8, left:carouselfigure.cfwidth * 3/4, top:carouselfigure.cfheight*5/16, zindex:2, opacity:0.7, bordersize:0 },{ width:carouselfigure.imgwidth*3/8, height:carouselfigure.imgheight*3/8, left:carouselfigure.cfwidth * 3/4, top:0, zindex:1, opacity:0.2, bordersize:0 },]; //5.2 轮播图使用small风格时，页面5张图在静态页面中的属性值 carouselfigure.setviewposdata.small = [ { width:carouselfigure.imgwidth*3/8, height:carouselfigure.imgheight*3/8, left:0, top:0, zindex:1, opacity:0.2, bordersize:0 },{ width:carouselfigure.imgwidth*3/4, height:carouselfigure.imgheight*3/4, left:0, top:carouselfigure.cfheight/8, zindex:2, opacity:0.9, bordersize:0 },{ width:carouselfigure.imgwidth, height:carouselfigure.imgheight, left:carouselfigure.cfwidth/6, top:0, zindex:3, opacity:1, bordersize:3 },{ width:carouselfigure.imgwidth*3/4, height:carouselfigure.imgheight*3/4, left:carouselfigure.cfwidth * 1/2, top:carouselfigure.cfheight/8, zindex:2, opacity:0.9, bordersize:0 },{ width:carouselfigure.imgwidth*3/8, height:carouselfigure.imgheight*3/8, left:carouselfigure.cfwidth * 3/4, top:0, zindex:1, opacity:0.2, bordersize:0 }];}());//验证初始化是否成功,否则全部隐藏,结束进程if(!carouselfigure.applicationflag){ $("#carouselfigure").css("display","none"); return false;}/** 第二部分： 对轮播图的箭头进行初始化(包括页面中的静态布局，和点击事件和悬浮事件)*/ carouselfigure.initassow = function (assow,direction){ //实现轮播图箭头的静态样式、悬浮事件和点击事件 assow.css({ position:"absolute", left:this.setassowdata[direction].left, top:this.setassowdata[direction].top, "z-index":4 }) .mouseover(function(){ //鼠标悬浮切换图片 $(this).attr("src",carouselfigure.setassowdata[direction].hoverurl); }).mouseout(function(){ $(this).attr("src",carouselfigure.setassowdata[direction].originurl); }).click(function(){ //记录点击事件的次数 carouselfigure.clickarrowfun(direction); }); } //调用初始化轮播图函数--实现左右箭头全部功能 $("#carouselfigure > 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标签，然后新建<li><img></li>来存放每张轮播图。 */ $("#carouselfigure ul").empty(); for(var i = 0; i < carouselfigure.setviewposdata[carouselfigure.type].length; i++){ $("#carouselfigure ul").append('<li><img src=""></li>'); 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 < this.setviewposdata[this.type].length - 1; i ++){ this.startmove(i, this.setviewposdata[this.type][i],this.setviewposdata[this.type][i+1],direction); } } } /** 功能:让一张轮播图从某一个状态变换到另一个状态 (包括位子、透明度、边框等等属性) */ carouselfigure.startmove = function (index,startobj,endobj,direction){ //所有属性的增量 var increaseleft = endobj.left - startobj.left; var increasetop = endobj.top - startobj.top; var increasewidth = endobj.width - startobj.width; var increaseheight = endobj.height - startobj.height; var increaseopacity = endobj.opacity - startobj.opacity; var increasebordersize = endobj.bordersize - startobj.bordersize; var time = this.framenum; //共总帧数 var i = 1; //帧数的记步标志索引 //定义函数：一帧到下一帧的变化过程 function movestep(){ settimeout(function(){ var tmpobj = $("#carouselfigure ul img:eq("+index+")"); //每一帧时图片的属性改变量 tmpobj.css({ width:startobj.width + (increasewidth/time) * i + "px", height:startobj.height + (increaseheight/time) * i + "px", top:startobj.top + (increasetop/time) * i + "px", left:startobj.left + (increaseleft/time) * i + "px", border:startobj.bordersize + (increasebordersize/time) * i + "px solid #fff", opacity:startobj.opacity + (increaseopacity/time) * i, }); //当小于30帧时，继续递归，直至调用30次完成动画效果 if( i++ <time){ if(i == 15){//轮播图每张图片的层级关系处理方式 var zindex = new object; zindex.big = {prev:[null,1,2,3,4,3,2],next:[2,3,4,3,2,1]}; zindex.small = {prev:[null,1,2,3,2,1],next:[2,3,2,1]} tmpobj.css("z-index",zindex[carouselfigure.type][direction][index]); } movestep(); //递归 }else{ carouselfigure.completeanimation(direction); //完成一张图片的动画 } },carouselfigure.comsumetime/time); } movestep(); //开始动画 }/** 第五部分： 当每次轮播动画结束后的处理函数 1. 首先，判断一次轮播动画是否结束； 2. 对容器数据(imagecontains)进行调整，形成队列 3. 重新渲染整个轮播图的静态页面 4. 通过clickarrow，处理动画队列*/ carouselfigure.completeanimation = function(direction){ this.completeanimationnum++; //表示完成一次动画 if(this.completeanimationnum == (this.setviewposdata[this.type].length -1)){ //重构用户自定义数据的顺序； if(direction == "prev"){ var tmp = this.imagecontains.shift(); this.imagecontains.push(tmp); }else if(direction == "next"){ var tmp = this.imagecontains.pop(); this.imagecontains.unshift(tmp); } //重新渲染轮播图七张图片的静态样式 for(var i = 0; i < this.setviewposdata[this.type].length; i++){ this.initimages(i,this.setviewposdata[this.type],this.imagecontains); } //解决边框的bug的问题 if(this.type == 'big'){ $("#carouselfigure ul li img:even").css("border","0px"); }else{ $("#carouselfigure ul li img:odd").css("border","0px"); } //处理动画队列 if(direction == "prev"){ this.clickarrow++; }else if(direction == "next"){ this.clickarrow--; } if(this.clickarrow > 0){ this.startanimation(direction); }else if(this.clickarrow < 0){ this.startanimation(direction); } } }};
broadcast.html
<!doctype html><html> <head> <meta charset="utf-8"> <title>轮播图实例</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <style> *{ padding:0px; margin:0px; } ul{ list-style:none; } body{ background:#eee; padding:10px; } #carouselfigure{ } </style> <body> <div id="carouselfigure"> <img src="img/prev.png" width="76" height="112" /> <img src="img/prev.png" /> <img src="img/next.png" width="76" height="112" /> <img src="img/next.png" /> <ul> <li><img src="img/1.jpg" width="500" height="250"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> <li><img src="img/4.jpg"></li> <li><img src="img/5.jpg"></li> <li><img src="img/6.jpg"></li> <li><img src="img/7.jpg"></li> <li><img src="img/8.jpg"></li> </ul> </div> </body></html><script src="js/broadcast.js"></script><script> $(function(){ //对轮播图进行初始化 carouselfigure.init({type:'small',comsumetime:1000}); carouselfigure.start(); })</script>
实现效果
相关推荐：
怎么用简单的js代码实现轮播图滚动效果？
koa-router是什么？详解koa-router的大致结构与运行流程
以上就是js实现图片轮播的代码实例（详细代码）的详细内容。