javascript - js里首尾相接轮播的原理是什么？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - js里首尾相接轮播的原理是什么？

高洛峰 2017-07-05 10:52:07

[JavaScript讨论组]

1694

一般的轮播都知道是改变图片父容器的left来实现，那如果是首尾相接的轮播的原理呢？

JS方面该如何回控制呢？

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(8)

给我你的怀抱2017-07-05 10:54:07 8楼

我说说我的思路吧，希望能给你帮助。我用Jquery的。
<ul>
<li><img>1</li>
<li><img>2</li>
<li><img>3</li>
<li><img>4</li>
.....
<ul>
获取所有li标签$("li")。点击左或右移动按钮，ul就左右移动XX像素（每个li大小一样，移动一个li的width）
向左就把第一个$("li").eq[0]，放到ul的最后（appendTo）；右移就把最后li放到最前面（prependTO）。
加点动画效果animate（）好看点。

赞 +0

添加回复

阿神2017-07-05 10:54:07 7楼

首尾相接吧？之前看过一些相关轮播原理，一般来说第一张切换到第二张用js一点点的移动切换的，那么当到了最后一张的时候，我们可以在最后一张后面加多一张第一张图片的拷贝，然后最后一张切换到第一张的分身也是一点点的移动切换，只不过，切换完毕后，立马直接把改成真的第一张的位置，也就是left:0. 这个时候后面再继续又是第一张切换第二张愉快的切换了。- - 不知道题主是不是问的这个？

赞 +0

添加回复

PHP中文网2017-07-05 10:54:07 6楼

其实很简单，假设原来有五张图，结构如下：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
<ul>

你把它变成：

<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
<ul>

当第一张向左滑动时，动画结束后重置 left 至第五张就可以，反之！

赞 +0

添加回复

扔个三星炸死你2017-07-05 10:54:07 5楼

轮播图我倾向动态改变src

赞 +0

添加回复

扔个三星炸死你2017-07-05 10:54:07 4楼

题主知道队列和栈么，如果知道就很好解释了，轮播图就是一个队列，出队列元素重新进队列

赞 +0

添加回复

迷茫2017-07-05 10:54:07 3楼

用2组相同图片，通过transition和修改left来移动。

当left到第二组第一张的时候，直接关闭trantision并left到第一组第一张，然后再开启transition

赞 +0

添加回复

曾经蜡笔没有小新2017-07-05 10:54:07 2楼

原理就是：假设向左移动，每次移动之后，将最左一张图的p挪到最右，也就是将第一个p挪到最后一个，同时修改大容器left的值，加上一个图的宽度。

赞 +0

添加回复

迷茫2017-07-05 10:54:07 1楼

用jquery的话可以用insertAfter和insertBefore实现

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>