1200字范文 > 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

利用jQuery实现图片无限循环轮播(不借助于轮播插件)

时间：2021-07-01 11:14:26

原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能，而这次是用jQuery来实现图片无限循环轮播！

用到的技术有：html、css、JavaScript（少）、jQuery（主要）

效果展示：

html代码：

<div id="list" style="left: -600px;"><img src="img/5.jpg" alt="5"/><img src="img/1.jpg" alt="1"/><img src="img/2.jpg" alt="2"/><img src="img/3.jpg" alt="3"/><img src="img/4.jpg" alt="4"/><img src="img/5.jpg" alt="5"/><img src="img/1.jpg" alt="1"/></div><div id="pointsDiv"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a></div><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript" src="js/app.js"></script></body>

css代码：

jQuery代码：

记，实现图片轮播图功能，可以分为6个步骤：

1. 点击向右的图标, 平滑切换到下一页；点击向左的图标, 平滑切换到上一页。

（这步一定要想清楚，切换到上一页，图片向对于父元素朝右浮动一张图片的宽度，所以left值为正PAGE_WIDTH；同理，切换到下一页，图片向对于父元素朝左浮动一张图片的宽度，所以left值为负PAGE_WIDTH。

其次，要仔细想想“平缓切换”这一过程，我们简单的把点击上一页，图片是瞬间向右移动的，我们要怎么做到平缓切换呢？

举个简单的小例子，可以帮助你理解：

不知道你是否注意过在页面点击“回到顶点”时的滚动条滚动的样子，滚动条不是一瞬间嗖的回到顶点的，而是有一个过程，这个过程就可以看作一个“平缓”滚动。

那是如何做到的呢，分析一下

滚动条距离顶点的距离，我们可以获取总路程距离：var totalDistance = $(document.documentElement).scrollTop()+$(document.body).scrollTop();

然后我们可以定义回到顶点的总时间：var totalTime=1000;//1秒

再定义平缓滑动的每小段距离用的时间：var time = 50;

通过这三个参数，我们可以获取小段路程距离的个数：var count = totalDistance/time;

获取每小段的距离：var distance = totalDistance/count;

定义一个定时器，每次定时器运行时总距离减少distance距离，从而达到一个“平缓滑动”的视觉效果。

从这个小例子，我们就能清晰的知道我们只是把滑动的总距离分成n个小距离，每小段距离都有一个时间间隔，从而给用户一个“平缓滑动”的视觉效果而已。

所以“平缓切换”也是这样实现的。

注：快速点击时, 翻页会出现bug，这是因为还在切换页面中，就发生了点击事件，而我们每次设置图片切换的总距离不变，但是事实上图片到父元素的距离一直在改变

）

2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页

（这就是为什么html代码里面循环5张图片，但html写了7张图片，这是为了保证图片能无限循环切换。

图解：

代码：

//2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页// 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)if(currLeft===-(imgCount+1) * PAGE_WIDTH) {currLeft = -PAGE_WIDTH} else if(currLeft===0){// 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)currLeft = -imgCount * PAGE_WIDTH}

）

3. 每隔3s自动滑动到下一页

4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换

5. 切换页面时, 下面的圆点也同步更新

6. 点击圆点图标切换到对应的页

jQuery完整代码：

$(function () {var $container = $('#container')var $list = $('#list')//圆点var $points = $('#pointsDiv>span')//向左var $prev = $('#prev')//向右var $next = $('#next')var PAGE_WIDTH = 600 //一页的宽度var TIME = 400 // 翻页的持续时间var ITEM_TIME = 20 // 单元移动的间隔时间var imgCount = $points.lengthvar index = 0 //当前下标var moving = false // 标识是否正在翻页(默认没有)// 1. 点击向右(左)的图标, 平滑切换到下(上)一页$next.click(function () {//点击向右的图标，切换到下一页，list向左移动600px,即(相对于container)left：-600pxnextPage(true)})$prev.click(function () {//点击向左的图标，切换到上一页，list向右移动600px,即(相对于container)left：+600pxnextPage(false)})// 3. 每隔3s自动滑动到下一页var intervalId = setInterval(function () {nextPage(true)}, 3000)// 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换$container.hover(function () {// 清除定时器 clearInterval(intervalId)}, function () {intervalId = setInterval(function () {nextPage(true)}, 3000)})// 6. 点击圆点图标切换到对应的页//每个圆点都加一个点击监听事件$points.click(function () {// 目标页的下标var targetIndex = $(this).index()// 只有当点击的不是当前页的圆点时才翻页if(targetIndex!=index) {nextPage(targetIndex)}})/*** 平滑翻页* @param next* true: 下一页* false: 上一页* 数值: 指定下标页*/function nextPage (next) {/*总的时间: TIME=400单元移动的间隔时间: ITEM_TIME = 20总的偏移量: offset单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME)启动循环定时器不断更新$list的left, 到达目标处停止停止定时器*///如果正在翻页, 直接结束if(moving) { //已经正在翻页中return}moving = true // 标识正在翻页// 总的偏移量: offsetvar offset = 0// 计算offsetif(typeof next==='boolean') {offset = next ? -PAGE_WIDTH : PAGE_WIDTH} else {offset = -(next-index)* PAGE_WIDTH}// 计算单元移动的偏移量: itemOffsetvar itemOffset = offset/(TIME/ITEM_TIME)// 得到相对于父元素偏移量的left值var currLeft = $list.position().left// 计算出目标处的left值var targetLeft = currLeft + offset// 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器var intervalId = setInterval(function () {// 计算出最新的currLeftcurrLeft += itemOffsetif(currLeft===targetLeft) { // 到达目标位置// 清除定时器 clearInterval(intervalId)// 标识翻页停止moving = false//2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页// 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)if(currLeft===-(imgCount+1) * PAGE_WIDTH) {currLeft = -PAGE_WIDTH} else if(currLeft===0){// 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)currLeft = -imgCount * PAGE_WIDTH}}// 设置left$list.css('left', currLeft)}, ITEM_TIME)// 更新圆点 updatePoints(next)}/*** 更新圆点* @param next*/function updatePoints (next) {// 计算出目标圆点的下标targetIndexvar targetIndex = 0if(typeof next === 'boolean') {if(next) {targetIndex = index + 1 // [0, imgCount-1]if(targetIndex===imgCount) {// 此时看到的是1.jpg-->第1个圆点targetIndex = 0}} else {targetIndex = index - 1if(targetIndex===-1) { // 此时看到的是5.jpg-->第5个圆点targetIndex = imgCount-1}}} else {//next表示点击圆点的跳到的页数targetIndex = next}// 将当前index的<span>的class移除// $points.eq(index).removeClass('on')$points[index].className = ''// 给目标圆点添加class='on'// $points.eq(targetIndex).addClass('on')$points[targetIndex].className = 'on'// 将index更新为targetIndexindex = targetIndex}})

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。