jquery写出个人电脑端轮播图实例

最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目),其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用框架写一个轮播图吧。

现在把自己写的轮播图这块代码单独拿出来，做一个小演示写在这里记录一下（演示中轮播图的图片网上随意找的)

实现的效果：

1、自动轮播（轮播时间间隔在射流研究…代码中自定义)

2、点击左右侧按钮，实现手动切换

3、底部小圆点根据切换图片的位置相应的显示活跃的状态

4、鼠标经过轮播图区域，停止轮播，离开轮播图区域开始轮播

代码目录结果如下：

一、index.html

注：这里以5张图片为例，页面上真正轮播展示给用户看到的是5张不同的图片，但是为了轮播效果的连贯性，所以在第一张图片前面添加上第五张图片，在第五张图片后面加上了第一张图片，所以演示结构里是七张图片，每张图片的尺寸必须都是一样的哦（这里宽高尺寸是720 * 350像素).

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title PC-jquery版轮播图/title link rel='样式表href='css/style.css' rel='外部no follow '/headdydiv class=' layout ' H2 style=' text-align : center；PC-jquery版轮播图/H2 div class=' slide ' id=' slide ' div id=' outer ' class=' outer ' ul id=' inner ' class=' inner ' lia href=' http://www .百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' p图片-5/pimg src=' http : images/slide-5。jpg/a/Li lia百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' p图片-1/pimg src=' http : images/slide-1。jpg/a/Li lia百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' p图片-2/pimg src=' http : images/slide-2。jpg/a/Li lia百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' p图片-3/pimg src=' http : images/slide-3。jpg/a/Li lia百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' p图片-4/pimg src=' http : images/slide-4。jpg/a/Li lia百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' p图片-5/pimg src=' http : images/slide-5。jpg/a/Li lia百度。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' p图片-1/pimg src=' http : images/slide-1。jpg '/a/Li/ul！-底部小圆点-ol class=' dot ' id=' dot ' Li class=' active '/Li Li/Li Li/Li/Li/Li/ol/div！-左右两侧的点击切换按钮-div class=' arrow-box ' div class=' arrow arrow-l ' id='arrow_l'‹/div div class=' arrow arrow-r ' id=' arrow _ r ' \ \/div/div/div脚本src=' http : js/jquery。量滴js '/script script src=' http : js/index。js '/脚本/正文/html二、style.css

* { margin : 0；padd : 0；盒子尺寸：边框盒子；}.布局{ width : 1000 pxmargin : 30px自动；}ul、ol、李{列表式：无；}.相对滑动{位置：宽度： 900像素；margin:auto}。滑动。外部{位置：相对；余量： 30px自动；宽度： 720像素；高度： 400像素；飞越：隐藏；}.滑动。外部。内部{宽度： 5040px高度： 350像素；绝对位置：左侧：-720像素；top : 0；}.滑动。外部。内部li {左侧浮动：高度： 350像素；}.滑动。外部。内阿利{ display:块相对位置：宽度： 100%;高度： 100%;}.滑动。外部。内阿利p {位置：绝对值；左： 0；底部： 0；color : # ffffont-size : 18px；宽度： 720像素；高度： 80px线高： 80px左填充左侧： 50px背景：线性梯度(180度，rgba(0，0，0，0)，rgba(0，0，0，0.5))；}.滑动。外部。点{页边距-top : 365 px；文本对齐：中心；}.滑动。外部。点li { height: 6px宽度： 6px边界半径： 3px背景-颜色： # d2cb CB显示器：内联块；margin: 0 3px}。滑动。外部点李。活动{底色： # 6e5c a 5；}.滑动。箭头框{位置：绝对值；宽度： 900像素；高度： 60pxtop : 150 pxleft : 0；}.滑动。箭头框。箭头{ width: 60px高度： 60px线高： 60px文本对齐：中心；边界半径： 30px背景-color : # DDE 2e 6；font-size : 60pxcolor: # 999cursor:指针；}.滑动。箭头框。箭头。箭头-l {左侧浮动：}.滑动。箭头框。箭头。箭头-r {右侧浮动：}三、index.js

注：js代码中，每个变量均已给了注释。为了防止快速多次点击，而出现动画不停的现象，这里在每次切换图片的时候先调用停止（假的，真的).但是注意在向左侧滚动的时候，滚动到最后一张图图片后，再次切换时就不要用停止（假，真),而是要瞬间定位到第一张图片（其实是数字正射影像图结构中的第二张)的位置，同样，向右侧滚动时，当滚动到第一张图片后，再次切换时就不用停止（假，真),而是要瞬间定位到最后一张图片（其实是数字正射影像图结构中的倒数第二张)的位置。

定义变量区间=3000;//轮播间隔时间var ARrol=$(' # ARROW _ l ')；//左侧箭头var ArrR=$(' # ArrR _ r ')；//右侧箭头var滑动框=$(' # slide ')；//轮播图区域var innerBox=$(' # inner ')；//内层大盒子var img=innerbox。儿童('李')；//每个图片var dot=$(" # dot ")；//小圆点盒子var imgW=$(img[0]).out width()；//每个里标签的宽度var img计数=5；//总图片个数（不同图片的个数)(实际数字正射影像图上是有七张)var I=0；//初始化为第0张图片定时器=null/定时器//自动轮播timer=SetInterval(函数(){ I；innerBox.stop(假，真)。动画({'left':-i*imgW 'px'}，300) dot.find('li ').removeClass("活动")。等式1 .add class(' active ')if(I IMgcount){ inner box。动画({ ' left ' :-1 * IMgw ' px ' }，0)；dot.find('li ').removeClass("活动")。等式(0).addCLaSS(' active ')I=1；}},间隔)//点击右侧箭头，播放下一张箭头r . click(函数(){ I；innerBox.stop(假，真)。动画({'left':-i*imgW 'px'}，300) dot.find('li ').removeClass("活动")。等式1 .add class(' active ')if(I IMgcount){ inner box。动画({ ' left ' :-1 * IMgw ' px ' }，0)；dot.find('li ').removeClass("活动")。等式(0).addCLaSS(' active ')I=1；}})//点击左侧箭头，播放上一张阿罗尔。点击(函数(){ I-；innerBox.stop(假，真)。动画({'left':-i*imgW 'px'}，300) dot.find('li ').removeClass("活动")。等式1 .addCLaSS(' active ')if(I ^ 1){ inner box。动画({ ' left ' :-IMGcount * IMgw ' px ' }，0)；dot.find('li ').removeClass("活动")。等式(imgCount-1).add CLaSS(' active ')I=IMgCOunt；}})//鼠标经过轮播图区域时，清除定时器，停止自动轮播slideBox.mouseenter(函数(){ clearInterval(计时器));})//鼠标离开轮播图区域时，重新启动自动轮播滑动盒。鼠标离开(函数(){ timer=setInterval(函数(){ I；innerBox.stop(假，真)。动画({'left':-i*imgW 'px'}，300) dot.find('li ').removeClass("活动")。等式1 .添加CLaSS(' active ')if(I IMg COunt){ InnerBox。动画({ ' left ' :-1 * IMgw ' px ' }，0)；dot.find('li ').removeClass("活动")。等式(0).addCLaSS(' active ')I=1；} },间隔)})四、效果图展示