本文实例为大家分享了框架实现轮播图及其原理的具体代码，供大家参考，具体内容如下

！DOCTYPE htmlhtmlhead元字符集=' utf-8 '名称=' viewport '内容=' width=设备宽度，初始比例=1.0,最小比例=1.0,最大比例=1.0,用户可缩放=无titleJQuery轮播图/title style * { padd :0；margin:0}。容器{宽度：600像素高度：400 px飞越：隐藏；位置：相对；margin:0 auto}。列表{宽度：3000像素高度：400 px位置：绝对；} .listimg { float:left宽度宽度：600像素高度：400 px} .指针{ position:absolute绝对值宽度宽度：100 pxbottom :20 pxleft :250 px }。指针跨度{光标：指针；显示：内嵌块；宽度：10 px高度：10px背景# 7b7d80边界半径：50%;border:1px实心# fff}。指针。在{ background: # 28a4c9}。箭头{位置：绝对文本装饰：无；宽度：40 px高度：40 px背景# 727 D8 fcolor : # ffffoft-weight :粗体；线高：40 px文本对齐：居中；top:180pxdisplay:none}。箭头：悬停{背景： # 0f 0f 0f} .左{ left:0}。右{ right :0 } . container : hover .箭头{ display : block }/style/head body div class=' container ' div class=' list ' style=' left :0 px；'！- img src='http:/静态/图像/照片1。jpg ' alt=' 5 '/-img src=' http :/静态/图像/横幅。jpg ' alt=' 1 '/img src=' http :/静态/图像/幻灯片1。jpg ' alt=' 2 '/img src=' http :/静态/图像/幻灯片1。jpg ' alt=' 3 '/img src=' http :/静态/图像/幻灯片1。jpg ' alt=' 4 '/img src=' http :/静态/图像/照片1。jpg ' alt=' 5 '/！- img src='http:/静态/图像/横幅。jpg ' alt=' 1 '/-/div class=' pointer ' span index=' 1 ' class=' on '/span span index=' 2 '/span span index=' 3 '/span index=' 4 '/span index=' 5 '/span/div a href=' # ' rel=' external no follow ' rel=' external no follow ' class='向左箭头/a href=' # ' rel=' external no follow ' rel=' external no follow ' class='向右箭头./static/js/jquery-3。2 .1 .量滴js '/script脚本var img count=5；定义变量指数=1;var intervalIdvar buttonSpan=$(' .指针')[0]。儿童；//htmlCollection集合//自动轮播功能使用定时器auto ext page()；function auto ext page(){ intervalId=setInterval(function(){ next page(true))；},3000);} //当鼠标移入停止轮播$('.容器')。鼠标悬停(function(){ console。日志(' hah ')；clearInterval(intervalId)；});//当鼠标移出，开始轮播$('.容器')。鼠标移出(function(){ auto text page()；});//点击下一页上一页的功能$('.左')。单击(function(){ NextPage(true))；});$('.右')。click(function(){ nextPage(false))；});//小圆点的相应功能事件委托单击按钮();函数单击button(){ var length=button span。长度；for(var I=0；ilengthi ){ buttonSpan[i].onclick=function(){ $(buttonSpan[index-1]).移除CLaSS(' on ')；if($(this).attr(' index ')==1){ index=5；}else{ index=$(this).attr(' index ')-1；}下一页(真);};} }函数下一页(下一页){ var target left=0；//当前的圆点去掉在样式$(按钮跨度[索引-1]).移除CLaSS(' on ')；if(next){//往后走if(index==5){//到最后一张，直接跳到第一张目标左侧=0；索引=1;} else { index target left=-600 *(index-1)；} }else{//往前走if(index==1){//在第一张，直接跳到第五张索引=5;目标左=-600 *(IMGcount-1)；} else { index-；target left=-600 *(index-1)；} } $('.列表')。动画({ left : target left ' px ' })；//更新后的圆点加上样式$(按钮跨度[索引-1]).添加CLaSS(' on ')；}/脚本/正文/html效果图：

原则：

页面结构：

将转盘容器设置为相对定位，宽度设置为图片宽度；容器分为四个部分：旋转图片；点击小按钮；前一个；后者

风格方面：

转盘容器相对定位，宽度/高度设置为图片的宽度/高度，溢出设置为隐藏；容器的每个部分都被设置为绝对定位，并放置在相应的位置；轮播图片的容器宽度设置为所有图片宽度之和，左边先设置为0；每张图片的宽度都是一样的，设置为向左浮动，左右图片排成一行，所以转盘图片的本质是带图片的容器的运动，每次运动的距离是一张图片的宽度，这样一次只显示一张图片；上一个/下一个设置为无显示，当鼠标移动到总容器中时，设置为块显示。

自动转盘是定时循环机构setInteval，鼠标移入，循环停止，移除循环继续；

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。