jQuery实现自定义轮播功能的详细说明

本文给出了一个用jQuery实现自定义轮播函数的例子。分享给大家参考，如下：

jquery实现轮播图

在网页首页上，经常会有轮播图片。

第三方轮播存在效果单一、扩展性低等问题。

用户定义的录制和广播图表功能：

1.综合功能；2.可维护性高；3.高可扩展性；4.易于与其他前端框架兼容

渲染：

实施思路：

1.布局

将图片显示区、上一次点击区、指示灯显示区叠加，显示主画布包裹层在最底层，其次是图片显示区，其中上一次点击区覆盖图片显示区，指示灯显示区覆盖图片显示区。

2.CSS样式

设置包裹层的相对布局，将图片显示区、上一次点击区、指示灯显示区设置为绝对布局。包裹层作为包裹体，图片显示区、上一次点击区和指示灯显示区堆叠。通过display:flex设置框的灵活布局，将指标显示区域图层排列在中间，通过display:block和display : inline-block将行级元素转换为块级元素

3.js

(1)渲染完1)web界面后，启动从左到右切换图片的定时器；(2)将鼠标移入转盘后关闭定时器，取下转盘后启动定时器。(3)点击上一张关闭计时器，从右向左移动一张图片，将鼠标从上一张移开启动计时器。(4)点击下一张关闭计时器，从坐的位置向右移动一张图片，将鼠标移开下一张图片启动计时器。(5)将鼠标移入指示灯，关闭定时器，将画面切换到指示灯指示的位置，将鼠标移离指示灯，启动定时器。

布局图：

实现代码：

shufflingfigure.html:

！doctype html lang=' en ' head meta charset=' utf-8 ' title carousel/title meta name=' keywords ' content=' carousel，Banner ' meta name=' description ' content='自定义carousel map ' link type=' text/CSS ' rel='样式表' href=' CSS/shuffflingfigure . CSS ' rel=' external nofollow ' script src=' http 3360http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/-图像区域-div类=' pic ' img src=' http :3358 demo . JB 51 . net/js/2018/html 5-css3-3d-img-flash-codes/images/Galaxy-guarders-Poster-High-RES . jpg ' img src=' http :http://demo . JB 51 . net/js/2018/html 5-css3-3d-img-flash-左右按钮-div=' BTN ' span='上一个'/span span='下一个'/span/div！-小圆点-div class=' lib ' span class=' on '/span span/span span/span span/span/span/div/div/body/html huffingfigure . CSS :

* { margin : 0；padd : 0；} #环绕{位置：相对宽度宽度：600像素重量： 260像素重量： 50像素自动；} #包装pic { width : 600 pxh three : 260 px相对位置：光标：指针；} #包装pic img { position:absolute宽度宽度：600像素重量： 260像素} #包装btn span{ position:绝对值；前：名50%；显示器：块；宽度： 50px高度： 90px页边距-top :-45px；背景： rgba(0，0，0，5);font-size : 20px文本对齐：中心；线高： 90px/*设置垂直居中*/cursor:指针；} #包装BTN斯潘。下一个{位置：绝对；右： 0；} #包装lib{ position:绝对值；bottom: 10px左侧： 50%;左边距：-65px；display: flex/*弹性盒子模型*/flex-方向：行；/*主轴为行*/狡辩-内容：空格-介于；/*主轴方向排列方式*/align-items:居中；/*辅轴方向排列方式*/宽度：130 pxheight : 30pxbackground : rgba(0，0，0，5);} #包装lib span { display:块；宽度： 10px高度： 10px背景# fffmargin: 5px边界半径： 50%;/*设置圆角设置圆形*/cursor:指针；} #包装. lib span . on { background : red } shuffling figure . js :

/** *由管理员于2017年四月6日创建*/window.onload=function () { /**定义*//*点击下一张按钮被点击的时候图片进行切换小圆点切换*/var $pic=$(' .pic’)；/*获取图片点击区域*/var $next=$(' .下一个');/*获取下一张的按钮*/var $prev=$(' .prev ')；/*获取上一张的按钮*/var $img=$(' .pic img’)；/*获取电影下所有的img*/var $lib=$(' .lib span’)；/*获取所有的小圆点*/var索引=0;//定义当前图片下标定义变量长度=$ img.length//图片个数//图片从左向右切换函数更改图像(){索引；索引=索引%长度；$img.eq(索引)。法丁(300)。兄弟姐妹()。淡出(300)；$lib.eq(索引)。addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；} //图片从右向左切换函数changeImageRighttoLeft(){ index-；索引=index0？length:index$img.eq(索引)。法丁(300)。兄弟姐妹()。淡出(300)；$lib.eq(索引)。addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；} //开启图片从左向右切换定时器var intervalHandle=设置间隔(更改图像，2000)；/**逻辑*///下一张点击时图片向右移动一张下一个。click(function(){ clearInterval句柄)；更改图像()；}) //下一张移除焦点时开启定时器$next.hover(function () { }，function(){ clearInterval句柄)；intervalHandle=设置间隔(更改图像，2000)；});//上一张点击时图片向左移动一张$ prev。单击(function(){ clearInterval(intervalHandle))；changeImageRighttoLeft()；}) //上一张移除焦点时开启定时器$prev.hover(function () { }，function(){ clearInterval句柄)；intervalHandle=设置间隔(更改图像，2000)；});$lib.hover(function () {/*移入小圆点上*///关闭图片切换定时器clearInterval(区间句柄)；索引=$(this).index()；$img.eq(索引)。法丁(300)。兄弟姐妹()。淡出(300)；$lib.eq(索引)。addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；}，function(){ intervalHandle=setInterval(change image，2000)；});$ pic。hover(function(){ clearInterval句柄)；}，function(){ intervalHandle=setInterval(change image，2000)；});//图片点击事件$ pic。click(function(){ alert(' index : ' index)；});}更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery图片操作技巧大全》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。