手写jQuery轮播图（无缝回到第一张）

前言

轮播图是学习前端必须会的，面试的时候经常会面试到。轮播图的难点在于最后一张到第一张怎么实现无缝滚动，这是一种思维方式的转变。

原理

我们以3张的轮播图为例讲解。

如下图，制作三张轮播图时需要放4张图片，第四张和第一张一样。

在如何从第四张1转到2呢？
在我们从3移到1后，我们需要把第4张变成第一张。惯性思维会认为需要从第四张1移动到第一张1。其实对计算机而言，并没有这个过程，加上移动只是为了是我们看的舒服，我们直接设置外部ul的偏移量变成0，就变成第一张了，因为1，4两张图片一样所以看不出来变化。
这一部分代码：

     function start() {timer = setInterval(() => {//将图片的right改为0则成了第一张图片，因为1，4两张图片一样所以看不出来变化num++if (num >= 7) {num = 1;ul.css({right: 0});}//然后在播放就是第一张到第二张了ul.animate({"right": width * num})}

Demo

为了方便，这里直接将css,js代码写在了html中，注意图片路径和jq路径需要改成自己的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="../../js/jquery-1.11.3.js"></script><style>* {margin: 0;padding: 0;border: 0;}.wrapper {position: relative;width: 500px;margin: 30px auto;}.top {width: 500px;overflow: hidden;}li {list-style-type: none;float: left;white-space: nowrap;}.imgs {width: 4000px;position: relative;}.center .btn {position: absolute;top: 140px;color: white;background-color: black;opacity: 0.7;width: 40px;height: 60px;line-height: 60px;text-align: center;}.center .btn.left {left: 0;}.center .btn.right {right: 0;}.buttom .move {position: absolute;bottom: 10px;transform: translateX(-50%);left: 50%;}.buttom .move li {width: 10px;height: 10px;border-radius: 50%;background-color: skyblue;text-align: center;margin-left: 3px;}.bg {background-color: red !important;}</style><title>Document</title>
</head><body><div class="wrapper"><div class="top"><ul class="imgs"><li><img src="../image/1.jpg" alt="" width="500px" height="333"></li><li><img src="../image/2.jpg" alt="" width="500px" height="333"></li><li><img src="../image/3.jpg" alt="" width="500px" height="333"></li><li><img src="../image/4.jpg" alt="" width="500px" height="333"></li><li><img src="../image/5.jpg" alt="" width="500px" height="333"></li><li><img src="../image/6.jpg" alt="" width="500px" height="333"></li><li><img src="../image/1.jpg" alt="" width="500px" height="333"></li></ul></div><div class="center"><div class="btn left"><</div> <div class="btn right">></div></div><div class="buttom"><ul class="move"><li class="bg"></li><li></li><li></li><li></li><li></li><li></li></ul></div></div><script>$(document).ready(function () {ul = $('.wrapper .top .imgs')var width = 500var num = 1start()// 鼠标放在下方原点上触发事件$('.buttom .move li').hover(function () {//清除ul所有动画队列ul.stop(true, true)//清楚定时器clearInterval(timer)//添加背景色$(this).addClass('bg').siblings().removeClass('bg')//图片移到相对应num = $(this).index()ul.animate({"right": width * num})}, function () {//开始轮播start()$(this).removeClass('bg')})//下一张$('.center .right').on('click', function () {ul.stop(true, true)clearInterval(timer)num++;if (num >= 7) {num = 1;ul.css({right: 0});}ul.animate({"right": width * num})color()start()})//下一张$('.center .left').on('click', function () {ul.stop(true, true)clearInterval(timer)num--;if (num <= -1) {num = 5;ul.css({right: 3000});}ul.animate({"right": width * num})color()start()})// 下方原点背景色function color() {if (num === 6) {$('.buttom .move li').eq(0).addClass('bg').siblings().removeClass('bg')} else {$('.buttom .move li').eq(num).addClass('bg').siblings().removeClass('bg')}}// 自动轮播function start() {timer = setInterval(() => {num++if (num >= 7) {num = 1;ul.css({right: 0});}ul.animate({"right": width * num})if (num === 6) {$('.buttom .move li').eq(0).addClass('bg').siblings().removeClass('bg')} else {$('.buttom .move li').eq(num).addClass('bg').siblings().removeClass('bg')}}, 1000);}})</script>
</body></html>

效果图

手写jQuery轮播图（无缝回到第一张）相关推荐

简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
VUE手写横向轮播图
前提:自己封装的轮播图,暂时没测出bug,有优化方案欢迎留言~ 效果如下图,一行三个,点击上一张/下一张向前或向后移动一格,窗口缩放会适当变形,不影响切换 <template><d ...
css+js手写卡片轮播图
实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样下面是代码 <html lang="en"><head><me ...
jquery轮播图无缝连接实现
经过一段时间的学习和实践,以及参考了许多中idea之后,实现了这个轮播图无缝链接.(这只是本人自己的方法)步骤如下: (1)要实现无缝连接,最好是有若干张长宽都一样的图片(数量大概在3到6张,多的就少 ...
简易jQuery轮播图插件
轮播图插件为简易的jQuery轮播图,实现点击无缝轮播,可用在移动端. 样式有问题,叠加修改即可. 下载地址:https://github.com/Summer-Lin/carousel HTML代码 ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html5slider轮播,jQuery轮播图插件slider-pro
slider-pro是一款模块化.响应式.支持移动设备的jQuery轮播图插件.该jQuery轮播图插件提供各种配置参数和方法,可以快速的创建多种模式的轮播图特效.它的主要特点有: 支持模块化. 响应 ...
android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...

手写jQuery轮播图（无缝回到第一张）

前言

原理

Demo

效果图

手写jQuery轮播图（无缝回到第一张）相关推荐

最新文章

热门文章