怎么把pc端的轮播图改成手机端的

嗨，我是豆芽，欢迎来到我的一百个海报教程的第五十三节，这一刻呢，给大家演示这样一张海报啊，首先还是把这张海报的 psd 拖到 ps 里边来 哦，先看一下他的一个尺寸，幺九二零乘以幺幺五五，对吧？文件，新件，幺九二零 幺幺五五，对吧？七十二二 gb， 这里像素， ok， 创建哎， 创建好了之后呢，把这张 psd 整体拖到这这个画布里边，然后松 双击，他这个 pst 就会合并成一张接批机啊，这张图呢，就作为我们的一个参考图，你可以给他三格画一下。 ok， 这张海报还是比较简单的啊，主要就是找一个类似的背景，对吧？模特，这个模特 这种感觉是非常不错的啊，他的这个动作包括神态都给人很有感觉，对吧？整体的配色黑色配红色也非常的非常的 nice 啊，非常好 抗皱 s 习惯性的保存一下。嗯，零五三第五十三个案例了 哦，相当于是男装海报吧，学设计的 小豆芽， ok， 存到桌面上。 psd 格式 好了之后呢，我们新建一个组，新建一个空白图层，那我们首先可以用画笔工具吸一下他背景的这个黑色二的加滴滴，把他背景的这个黑色先暂时的给他做出来啊， 然后下半部分的这个颜色可以用套索工具，对吧？新建一个空白图层啊， 然后把下边这个形状你可以只做一个，你也可以把两个都都套索出来，你如果想左右是百分之百对称的话，对称的话，那你就只套索一个出来， 另外一个复制一份就可以了。 到这里之后，我们可以双击一下，他就自动闭合了啊，选中画笔工具，按住二的键，吸一下这里的颜色。二特加迪丽特， 我把黑色背景显示出来啊，这边这个形状就填充好了， ctrl d 取消选区，然后呢，我们 ctrl 勾复制一层， ctrl t， 右键水平翻转，按住吸水键，把它挪到右边来，对吧？ 好了之后呢，双击确定再把背景隐藏起来，继续继续制作其他的部分啊， ctrl s， 然后把这个给他折叠起来吧，再新建一个组，新建一个空白图层来做中间的这一个部分。 中间这个部分怎么做呢？嗯，那就用矩形工具来做吧， 先把这个矩形给他框选出来， ok， 描边颜色我们先不管他吧，直接给他填充一个 一样的黑色，直接吸一下他这个黑色，他这个黑色不是纯黑色啊，是有点偏红的，对吧？他色相是指到红色这里了，有点偏红的，然后明度相对低一点的一个黑色。确定 描边色呢？我们再看一下他的一个描边色啊，隐藏显示描边色是一个灰色，对吧？那我们点他点描边， 嗯，灰色，那你可以直接吸一下这个红色，然后呢直接从这边往上走，走一点，他就是一个偏红的灰色了。确定 把它的描边像素改大一点啊？八个像素， ok， 差不多吧，那下边这个框框我们做好了，然后呢， ctrl 勾复制一层，复制一层之后呢，点这里点填充，把它的填充色以及描边色都改成上面这个颜色， 秒变色也改一下， ctrl t 再把它挪上来，这样你就能保证上边跟下边他们的这个宽度是一致的，对吧？稍微上去一点，再把这个红色拖到这个黑色的下边，这个就跟。

一招教你电脑端切换手机端！哈喽，大家好，现在手机 app 已经成为了一个全球的一个趋势了， 我们还傻傻的只看电脑端吗？还是为了看手机端，还要专门去手机下载或者买一个手机吗？今天教大家一招，电脑端切换手机端，让你省下一部手机的钱。第一步，随便打开一个蕾丝厅的链接。第二步，输入 coach shift 加按 第三步，点击写字切换口第四步，左上角刷新你的界面，最后展示的就是你手机段的界面，你学会了吗？学会了，省下一部手机钱，是不是要请我吃个饭呢？ 关注我，我是龙哥，一起努力干吧！

大家好，这里是风火轮技术团队，今天给大家带来的是用安卓开发的一款图片分享的小软件，在这个软件里面有注册用户， 还有三个界面，并且可以发布图片，发布自己的图片和查看自己的信息的功能。 由于这些布局东西比较多，就不给大家一一介绍，我们来手机端进行查看。 先来看一下之前做的两个小软件，这个是一个技术的软件， 这个是图片转换的一个软件， 星座的这个图片分享的软件，他先开始会让你注册一下他的账号，如果之前注册了账号，点击之后就直接进入了软件界面。 三个界面主页发布，还有一些基本自己的信息。这个收藏功能暂时还没有做好， 我们可以点击这个中间这个加号， 他会进入你的相册，你选择找选择你的图片， 设置一 个标题， 点击发布 分享成功。在这边刷新一下， 然后再切换成切换回这个界面，就能看到我们分布发布的这个图片了。 今天的分享就到这里了，有兴趣的伙伴也可以开发一款这样的软件，谢谢大家。

嗨，大家好，又跟大家见面了，接下来这堂课我们讲一下网站的轮播图是怎么替换的。首先我们点开我们就可以看得到，我们是直接可以上传图片进行替换的， 选择我们想要的图片就可以。那我们也知道网站最重要的话是栏目，那我们想要设定我们所需要的栏目来确定我们网站的内容， 所以我们要先看一下我们自己所需要的产品是什么来制定我们的栏目，这是非常重要的。

嗨，大家好，又跟大家见面了，接下来这堂课我们讲一下网站的轮播图是怎么替换的。首先我们点开我们就可以看得到，我们是直接可以上传图片进行替换的， 选择我们想要的图片就可以。那我们也知道网站最重要的话是栏目，那我们想要设定我们所需要的栏目来确定我们网站的内容， 所以我们要先看一下我们自己所需要的产品是什么来制定我们的栏目，这是非常重要的。

好，大家好啊，接着的话我们来继续安装啊，我们的一个手机端啊，首先的话我们打开我们的一个啊 ps， 好，然后的话我们打开这个图片热区啊，把这个图片热区拖到我们的这个手机端里面来啊，好，这边我们看一下这个图片热区的一个参数啊，他这边的话就是 宽度的话是一一二五是吧？啊？然后高度的话就是说，嗯，在一三五到一四四零之间啊，所以的话我们就是说 高度的话啊，不超过一四四零就可以了，嗯， 宽度的话是一二一一二五是吧？啊，我们首先把这个宽度确定好吧啊，首先的话我们把这个 把这个首页啊把它拉过来啊， 好，我们选择打开啊 啊，然后的话我们把这个首页啊四把它给打开。好，因为我们安装 手机端啊，现在电招的话他就不用安装了啊，所以的话我们把这个选择这个拆解工具啊，上面的这个海报的话，我们作为龙波已经安装了，对吧？好，双击确定啊， 好，我们就安装这一块，这一块的话我们还要保证他的高度的话就是说不能啊，下面这个叶纹，叶纹的话我们手机段叶纹也不要了啊， 啊，所以我们这个高度的话就是说刚才我们看了啊，不能大于这个 啊，一四四零是吧？现在他是三千，那我们要分成三份左右啊，好，我们 孔雀这啊， 好，我们这样去分，这样去分的话我们看一下就是说大概他这个高度是多少啊？这边的话我们这个 ps 的这个测量工具啊，测量工具的话就是这边有一个信息啊， 我们把这个信息的话把它选择这个像素，因为我们 电商方面都是用的像素，是吧？啊？高高一六三啊，可以的，不是不大于一四四零啊，这个一一零二啊，也是可以的，是吧？好，这个八四零啊，那这三个都是可以的。好，我们把这个三张图片保存一下啊，存，呃，首先的话我们用切片工具啊，选择这个切片 啊，一二三是吧？然后的话我们那个用这个存储外边使用格式啊，好，点击一下这个存储啊， 存到这个湖南辣酱里面来。我们这边的话就，呃新建一个文件夹吧，就是放一个首页， 好点击保存啊。啊，但是我们这边的话就是说我们存之前的话我们还有一点没有做好，因为的话他这边的宽度是要多少的 啊？这个我们这边的话电脑端做的是一九二零，对吧？而我们这个手机端的话，你这样做上去肯定不行，因为我们这个宽度的话他才需要一二五， 对不对啊？所以的话我们就是说把它改成一一二五啊，把一一九二零改成一一二五。好，点击一下确定啊，看看，就是说重要内容有没有被裁掉。哦呦，重要内容都被裁掉了，对吧？好，让我们返回上一步。孔雀加 c 返回上一步啊， 我们那这边怎么操作呢？我们直接用裁剪工具啊，把这个宽度设为一一二五啊， px 啊，那然后我们这样拉，这样拉的话就不就不会说啊， 就不会被多余裁掉了，而且这样裁的的话就是说能够保证他的这个宽度啊，是这个啊，一百啊，一千一百二十五对不对？因为裁剪工具吗？啊 这个想要学这个从 ps 开始学的啊，可以看我们的这个专业版啊如果说想要就是说了解如何发布产品如何直接成呃图片做好了如何安装的就看速成班啊。速成班是免费的啊 专业班是是要收费的啊需要的同学可以联系老师的微信啊啊专业班有什么不同的就专业班讲的更细基本上从 ps 开始讲起， 从 ps 啊零基础啊主图啊海报啊啊详情页的话都是从零开始设计啊首页都是从零开始设计安装啊然后还包含了运营啊速成班的话就是啊就是这几课啊 啊也是我们 b 站的一个粉丝的一个福利啊。呃好然后的话我们这边的话把它用裁剪工具裁好以后啊这个裁剪工具大家学了 ps 就就会用了啊就是用这个裁剪然后设置宽度啊 然后的话我们把这个选择文件啊接着接下来做一个切片啊，存储为外边使用格式啊点击一下这个存储啊好生成以迈进是吧啊这个首页四啊好确定 好然后的话我们可以来看一下这个深层的这个 啊在首页里面是吧 好被裁剪成了这几张啊一二三啊首页零一零二零三啊所以我们这边对应的的话就图片热区的话我就放三个啊图片热区啊 啊第一张热区里面我就是上传啊好点击上传啊。呃我就上传首页的第一张对吧 好大小不符合要求啊。这个大小不符合要求的话一一二五 乘以七三七啊我们看一下他这个不超过五百 k 是吧？啊，所以我们刚才就是说做的时候，裁的时候 他可能大于五百，开了我们再来点击重新存存一下啊，好，我们把它试图缩小一下啊，好，第一张现在是多少？五百三十五，对不对？所以我们品质的话稍微给小一点就他就会进行一个压缩，那现在就是二百七十，二百七十八啊， 好，这个第二个四百三十八，好，这个品质也给他小一点啊，或者就是说可以这边宽选啊，全部选中了啊，然后整体的给啊，最后一个六百多啊，也要给一下啊， 这个京东要注意点啊，动不动就超过五百，对不对啊？这个上午我超过五百的时候我还一脸懵，是吧？啊？这个啊，因为 啊，因为他之前的话可能京东不是这样的啊，我记得啊，好，然后我们不管了 啊，反正大家这，这个大家反正注意一下啊，也没有什么说太那个的啊。好，然后我们点击这个上传啊， 好，首页第一个啊，这样的话他就不会大于五百了啊，就不会出现这个大小不符了啊，他其实这样也是为，呃，为，为大家好，因为这样的话别人打开的速度也会更快一点。好，图片热去啊，这个就是加链接啊，在上面加链接啊，例如这个相过河的是吧？ 好，宽，选拉一下啊，然后相过河的啊，那我们就链接到这个相过河的这个上面来啊，高移辣酱啊，那相过河是吧？好，点击确定啊。然后这个拉上坡的啊， 就点击链接到这个啊，拉上坡的啊，然后这个拉蛮霸的啊， 就点击链接到这个啊，浪漫吧是吧，点击确定啊，然后确定好了就点击下保存啊， 接下来的话我们再来编辑第二个图片热区啊，好，从图库选择啊，上传图片这边点的话他有点慢啊，因为我这个电脑的话 啊，我这个电脑因为一天都没关了，所以他有点那个要重启一下啊，速度就会快很多啊。好，首页四杠零二啊， 好，选中他是吧，确定啊，好，然后的话就是说照样的添加热气啊，这个的话 是一个组合啊，是一个组组合的啊，点击一个确定啊 点击确定啊，好，点击保存 好，这个的话我们就放第三个啊，上传首页啊，四杠零三是吧，好，最后一个给你确定这个因为它本身产品就很少啊，一共就是三个辣酱，然后都是啊这两个组合那两个组合对吧 啊，然后添加热气啊啊，然后给他们就是说选中啊，给他们啊，这个 加上这个啊链接是吧啊，这个链接我一会再加啊， 然后的话我们点击这个发布店铺啊，好，发布成功啊啊，或者大家可以就自己去看一下啊，这个基本上首页的话就是这个样子了啊，对不对啊， 好，最后的话我们要发布一下，好，因为发布成功了啊，他就能够被搜索到是吧？好，好，那今天关于我们的这个店铺的话，我们就呃讲到这边啊，就是说啊，京东手机端的一个装修啊 啊，如果说有需要装修店铺的啊，或者说有需要学习的同学啊都可以联系朱老师啊，或者在学 学习中有什么问题的啊。好，谢谢大家的收听啊，我们下节课再见啊，那我们下节课的话就来讲这个 啊，电脑端的一个安装啊？电脑端安装其实步骤，呃，电脑端的话他多了一个电招啊。好，我们下节课再见啊。

大家好，上个视频我们做了一个轮播图的效果，然后有很多细心的同学发现了一个小问题，当我们在切换图片的时候，哎，怎么感觉有点抖动，卡顿的感觉哈，就是呢，没有那么平顺， 其实呢，他不是卡顿，这个呢是浏览器对这个动画过度他解析出来的一个结果，但是呢，对动画过度的解析，他是有兼容性的问题的，比方我现在呢换一个浏览器，我用 fireforce 火狐浏览器打开再来测试一下。 大家有没有发现在火狐上面切换图片的时候呢，他这种过渡的效果相当的丝滑，对吧，没有任何的抖动，当然我不排除当我录制成视频的时候呢，大家手机观看的效果可能没有自己在电脑端运行的效果好哈，不过应该也是可以看得出，在火狐上面呢是没有任 任何的抖动的，还是比较平滑的，但是在框上面运行呢，他就会带有一点点的抖动， 这个抖动呢，其实是 com 浏览器对我们这个元素位置发生变化过度的过程中呢产生的一种效果。本来呢，我在电脑端上面看，感觉带有这种抖动的过渡呢，感觉也挺好看的，但是可能录制下来在手机端观看啊，效果可能呢就稍微差一点， 不过呢没关系，我们现在呢就把这个问题给他解决一下。好，我们来看一下代码，这是我们上个视频写的代码。首先呢，我们来找一下，哪一句代码会使我们这个元素在过度的过程中呢控制他位置发生变化， 最明显的就这一句，在歪轴上面的平移这一句呢，会让我们这个元素他的位置在歪轴上面发生变化哈，主要 呢就是控制这些小的图片垂直居中。再来找一下大图，这里呢也有一个 transfer 这样子呢，在小图变到大图的过程中呢，他这一个位置的平移就要发生过度，对吧？ 好，我们呢就从这里来左手，特别是川思风二点转换呢，是 cs 三里面的内容，这里发生金融性问题的概率呢也大一点，我们就把这两句川思风控制位置平移的给他注视掉， 不需要他了。现在呢，无非就右边那几个小图就没有垂直居中了，对吧？但是呢，我们可以来看一下，切换的时候还有没有那种抖动的感觉哈，我们重新来打开一个， 由于我们把这个向上的平移呢给他去掉了，所以呢，现在他就没有垂直居中了，本来呢，他是在垂直居中的这个位置的，现在呢，他就沉下去了，这个先不管，先来看一下图片的切换呢，还有没有刚才 抖动的这个问题哈，我点下一张，哎，现在大家看到没有，现在的切换他就平顺平滑很多了，对吧？看一下刚才啊，这个是刚才还没有刷新的， 刚才呢是带有一定的抖动的这种感觉的，现在呢，我们把这一个川式风给他去掉之后呢，哎，他过度呢就平顺很多了。处理完抖动这个问题呢，我们就要想办法把这几个小图呢给他居中回来， 这一句平移的作用呢，无非就是让这个小图片向上移动他自身高度的一半，对吧？既然说这个川式风不好用了，那我们可以换一种方法给他实现同一样的效果， 控制元素往上面移动，我们是不是还可以通过 magic top 实现一样的效果？这里就应该是自身高度的一半，对吧，自身的高度是多少呢？三百像素，所以这里就应该是 一百五十哈，向上来移动呢，就是负的，负的一百五十像素，这个是控制小图的，当他显示为大图的时候呢，把这个给他再改回零就可以了。 好，来看下现在的布局有没有问题，这里呢，刷新一下，现在布局呢，没有问题了，小图也可以垂直居中。我们看一下图片的切换可不可以平顺过度哈，下一张， 哎，没有问题对吧？没有刚才那种抖动的感觉了。其实呢，我们还可以通过修改他运动过程中的被塞函数去达到我们想要的动画过度的效果。先试一下用系统定义好的，用 instine 这种方式来试一下 刷新切换图片。同样呢，没有这种抖动的感觉哈，不过呢，动画过度前面比 较慢，最后比较快，对吧？好像呢，没有默认这种感觉好。如果不喜欢系统内置的这种效果呢，我们还可以通过被塞函数自己去调一个满意的效果哈。先是第一个控制点， 我让动画进程呢，前面稍微快一点，第一个控制时间的参数呢，就小一点。然后呢，第二个值，我让整个动画进程呢，先给他放大， 就给他设置超过一，第二个点呢，随便给他设置就可以了。后面呢，也是稍微放大一点，结束的时候呢，再回复到我们想要的状态，通过这个被塞尔函数呢，可以画出一条被塞尔曲线出来的，我们这个动画的过渡实际上呢就是根据这条曲线来进行， 这里最简单阅读出来的呢，就是整个动画的进程，前面呢会快一点，然后整个动画他的进程已经超过一了，也就是呢，像这些位移啊，包括大小啊，他都会 超过自身预设的这个值，最后呢才恢复到原来的状态。最直观的呢，等一下我们应该会看到，在过渡的过程中呢，我们从小图切换到大图， 这个大图他会先放大一点，会超过百分之一百，最后才恢复到百分之一百的这个状态，同理缩小的时候呢，也一样哈，会缩的更小，最后呢再变回来来看下效果，刷新，然后呢我切换， 哎，对吧，这个照片呢，他会先放大一点再缩小，点击上一张呢，哎，他大图缩小的时候呢，会缩的更加小，最后再变回来 好，还是给他用回默认的效果吧，这里给他删除掉。来看一下最后的效果啊， 图片切换呢，没有问题。好，感谢大家的收看。

你有没有看到过同行宝贝的主图在电脑端和手机端显示的是完全不一样的，就是电脑端搜索和打开是一张图，手机端呢，搜索和打开又是另外一张图，妥妥的两个宝贝啊！你肯定会说这简单， 不就是在编辑页面里面加一个三比四的主图吗？这样手机页面就显示三比四的主图喽。但是这种方法啊，只是在手机端打开，是手机图搜索呢？还是和电脑一样显示的是电脑图， 就是那张一比一的主图，对吗？那应该怎么修改呢？点赞、收藏、保存好，记住喽！目前啊，有三种方法啊，一种呢是给主图加白图代码， 这样在电脑端显示的就是白图，手机端显示就是有图，达到双图的目的。另外一种呢，使用 ps 软件，把主图做成 j i f 的闪图 图形式，就是电脑端的图片显示二百四十秒，手机端的图片显示零秒的动图，去达到电脑端和手机端主图的不同。还有一种就是利用服务器做成一个双图网页，然后再利用插件插入，把这个双图 插入到主图位置，形成服务器双主图。这些都是可以让宝贝主图变成双主图的方法，你知道了吗？

像这样的图片轮播效果如何？制作一个方法教会你，视频有点长，建议点赞收藏慢慢看。第一步，海报设计 尺寸幺九二零乘以九百上速，这里的高度建议在七百上速以上，看起来比较大气，版型内容在九百五到一千二之间。第二步，上传海报，打开图片空间，点击上传。 第三步，代码生成，打开搞定设计，选择轮播工具， 在右侧图片设置里面，我们可以更换自己的图片和跳转链接，打开素材中心，复制图片地址，删除原来的图片地址进行粘贴。 跳转链接一般都是我们的宝贝链接，复制我们宝贝地址进行粘贴图片设置右边有一个动效设置，这边可以选择自己想要的方式进行设置，一般默认即可。然后我们生成代码， 这边我们是淘宝，就选择淘宝，点击复制代码。第四步，模块安装，打开装修后台，添加一个自定义区域，到店招下方，点击编辑标题，选择不显示， 点击圆码粘贴代码，再次点击圆码，点击确定发布，看效果。第五步，查看效， 发布完了之后，我们检查一下轮波效果，看一下轮波是否正常，跳转是否正常。 ok， 这边完全没有任何问题，那么下节课我们来讲一下这里的间隙如何去除。好了，本期内容就到这里，我们下期再见。

大家好，今天呢给大家推荐一个幻灯片放映工具，它可以将多张图片配着音乐放映出来，效果比视频要好，而且呢使用起来是非常方便的， 下面呢我们来看一下该如何使用。首先我们双击打开这个文件， 在初次使用的时候呢，由于没有设定任何的文件夹图片，所以说需要进行设置，我们点击是 就可以打开，设置选项虽然非常多，但是呢最简单的就上面两个框，第一个就是添加图片文件夹， 我们点击添加，然后选择文件夹， 还可以继续添加添加多个文件夹，他呢会从上往下或者随机进行播放，如果不需要的我们就点击这里的删除按钮， 如果想替换我们就点击一下选择编辑，然后再选择其他的文件夹。 第二个是音乐文件夹，要配上音乐，我们点击添加，然后选择我们的音乐， 音乐可以有多首？也可以啊，有一首我们选择背景音乐，在设置完成之后呢，我们就可以点击确定 这个时候就开始放映， 在放的时候呢会有这样一个控制条，这个控制条呢我们可以拖到我们的第二块屏幕上进行控制。 好，下面呢我们来看一下这几个按钮。第一个是暂停播放图像，我们点击之后图像呢会暂停啊，会出现黑屏，再次点击 又会开始继续放映。第二个是暂停播放音乐，我们点击一下音乐 将会慢慢停止只播放图片，然后我们再次点击就会重新开始播放音乐， 这个和视频不同，视频我们点击暂停的时候呢会戛然而止，但是呢软件他会慢慢的结束，然后呢慢慢的出现， 有种淡入淡出效果，这样呢显得整个播放的暂停与继续才不至于那么突兀。 那下面是重新开始，我们点击一下，可以从头开始播放，播放第一页， 然后是第二页， 这是第三页，我们看到右上角有这个文本，哎，文本是怎么添加的呢？下面我们一起来看一下。 点击这里的编辑幻灯片，就可以打开所有的图片，我们点击在右侧有预览图 可以进行编辑文本就是播放到这张图片时，在右上角显示什么文本好，比如深秋意境图， 上方还有一个标题幻灯片，标题幻灯片是什么意思呢？我们 们选中之后，整个的标题幻灯片就只有弹入，弹出效果时间比较长。另外呢是先显示标题，然后再显示图片， 如果不勾选，它的动态效果就比较多，并且呢图片和文字是同时显示，同时退出的好，我们可以一个一个的去设置。好 好，接着我们点击保存，这个需要退出重新启动才能够看到这个效果，我们点击退出 好，然后按下 e、 s、 c 完全退出，这个时候我们再次双击，它会直接开始放映。 好，接下来我们来看 下更详细的设置， 我们点击设置 来看一下其他的参数。第一个是过渡效果，过渡效果呢有四种， 第一个是模糊，第二个是呼吸，呼吸就是放大缩小， 下面是浮线轮换，就像轮子一样进行缩放展现。那下面的是随机，尤其这三种效果随机出现， 为了使效果更加丰富，我们建议选择随机。下面是图片的载入方式， 无论是选择单张载入还是一次性载入，展示效果都没有任何的变化， 只是单张载入会使放映能够快速启动，而一次性载入如果是图片太多的话呢，他的启动会比较慢， 而且呢会占用更多的内存，因此呢，我们建议选择单张载入。下面是幻灯片图片顺序，还有音乐顺序，我们可以选择随机， 那如果我们已经设定好了这个它的播放的顺序，我们就可以将随机给取消， 那在这边有帧速率，帧速率越大，播放能 那就越流畅啊，设置六十就已经很不错了。下面是每张幻灯片他的持续时间，这个持续时间呢包括进入 展示和退出时间，软件说不要低于四秒，我们设置为七秒或者八秒，展示效果呢会更好。接下来是缩放的质量，我们默认为高， 如果有的时候呢，他展示比较卡，我们可以选择中或者低，好来回调整一下。 那下面是优化分辨率啊，如果是分辨率较高的话，软件打开会比较卡，因此他会进行 优化，将这个比率呢给降低一下。那下面是软件的弹出效果，还有垂直移动水平移动的优化， 如果不加控制的话，可能会出现一些意外情况啊，因此呢，我们勾选勾选之后呢来限定一下比例，也就是呢啊，保证能够显示 百分之六十的图像内容，而不至于他的缩放过大或者是过小。 下面是垂直锁定，如果我们放映的是人像，头像如果被切断了，很显然不好，我们呢就勾选垂直锁定，这样呢可以避免头像只展示一半，那下 下面是模糊方式，就是在换片的时候是不是要模糊一下，我们看当前他换片的时候呢，都是清晰的，没有模糊效果，我们可以开启模糊效果，在他图片出现时模糊。 也可以啊，在图片淡出时模糊， 也可以在弹入和弹出时都模糊。好，接下来是注册文件夹关联，我们点击之后 在我们的文件夹上直接点右键就可以直接开启这种幻灯播放啊，接下来我们点击确定。 那如果我们做的设置比较多，建议呢退出，我们点击这里的退出按钮， 然后按下 esc， 接着重新启动。我们来看一下，这样呢就出现了这种模糊效果，我们把它移出去， 接下来我们打开图片文件夹，在这里我们点右键可以看到使用它进 进行播放，我们直接点击打开，可以看到就直接进入这种播放界面，连软件都不用找了。 好，这一个我们也可以啊，使用它进行播放。好的各位朋友，这个幻灯片放映软件就为您介绍到这里，感谢您的观看，再见。

今天我们来做一个淘宝首页添加视频的教程，首先我们来看一下 pc 端是怎么安装的，无线端的教程放在最后， 嗯，首先我们把准备好的视频背景还有视频素材先上传到店铺， 呃，我们先打开图片空间，在图片空间里面把视频背景线上传，然后在左侧图片下方会有一个视频，我们点一下视频，然后把视频素材拖进去， 视频上传好之后，他会有一个审核的时间，审核通过之后才可以正常使用。我们先来到图片空间，把刚才上传好的图片背景 地址复制一下，然后打开搞定设计，使用淘宝天猫布局代码工具。 打开之后，我们在上方有一个图片，点击图片下面会出现一个选框， 然后再点击一下选框，右侧会出现一个编辑栏，我们在图片地址这里粘贴我们刚才复制好的背景图片，这里我们可以看到他这个尺寸是变形的，然后我们点一下下面的实际尺寸， 就会自动调整为原原图的大小，然后我们把图片拖动一下，移动到屏幕的正中间，调整好之后，我们在上方选择视， 然后在下方的选框里面把视频的大小调整好。回到店铺的图片空间，选择我们刚才上传好的视频，复制一下地址， 这个地址是有三个选项，我们选择中间的这个 fast 地址，然后回到网站，在我们刚才的这个视频选框里面粘贴上视频的地址， 点击生成代码，我们这里是否去掉件新闻，选择去掉二十， 导出代码，然后复制代码。回到店铺装修页面， 我们添加一个自定义区，然后打开编辑，不显示标题，选择编辑原码，然后把刚才复制的代码粘贴进去保存就可以了。 他这个后台是不能预览视频的，所以我们直接点击发布，然后在前台就可以看到一个我们装修好的页面。 接下来我们来看一下无线端安装视频，无线端的就比较简单，我们直接打开无线端装修的后台， 然后在左侧左侧菜单里面有一个视频，直接把这个单视频拖入，然后在右侧选择对应的视频比例，选择视频， 这里是有一个对应的宝贝，我们根据自己的需求去选择，不选也可以。 设置好之后我们直接保存，然后发布就可以，因为他后台是没办法预览的，但是前台是可以正常播放的。

大家好，今天给大家分享这种图片轮播进度条效果的制作方法，感兴趣的朋友跟着我一起来学习一下吧。 我们打开剪映点开始创作，选择几张同比例的图片素材点添加， 点击两端素材中间的小白块，点运镜，选择向左，把时长拉满，点左下角的全局应用。打对勾，在工具栏点击文本，新建文本，输入五个一字，添加了几张图片就输入几个，一点字体， 选择减中元。打对勾，点样式，把文本的颜色选择一个灰色，把文字放大，往下移动，放在合适的位置。打对勾，把文本拉长，和主轨道素材对齐 点复制点编辑，把文本的颜色选择白色，点动画入场，动画 选择向右擦除。打对勾，把时长拉满，最后再添加上自己喜欢的音乐，把音乐多余的部分分割删除。我们来看一下这个效果。

大家好，我是追口，这节课呢，我们继续跟着上一节课的步伐来继续往下研究一下如何让我们的首页轮播图在不同设备之间，也就是上一节课讲的我们左上角 不同设备之间如何能做到一个相对比较完美的适配。嗯，首先呢，我们现在还是来回顾一下我们现在目前已有的这两个呃轮播图，比如说这第这是第一个，还有个这是第二个， 这是我们在上节课里进行操作设置的，他们会在实际的使用过程中遇到一些什么问题。嗯，我们点击这个右上角，我们到我们右键在新标签页中打开一下，我们看一下，这是我们一个是在我目前笔记本端实际访问的 这么一个情况，这时候呢，我们先右键点击一下这个 inspect， 然后把这个不同设备端的这个给打开移动适配，我们看一下他在移动端，然后在这个目前呢这个就是这个 啊，平板端以及我们最大的是一个四 k 端的一个实际的展示，大家可以看到，呃，采取第一种我们这个呃 slide 的一个设置方式呢，花， 呃，他会完整的展示，这是目前是在我们一个四 k 端的，就是最大的屏幕内，呃，就是一般笔记本屏幕啊，就是一般台式机最大屏幕显示的一个实际展示效果。 嗯，有一些小伙伴可能自己在办公室的，呃显示器比较大，所以实在实际体验过程中呢，我们的这个导航栏就会变成目前这个 他居中，但是左右呢有两个空白，然后他的整个宽度，因为我们设置的大家可以看到只有一九二零乘八百，所以呢中间就是一九二零，然后高就是八百，但是呢由于我们实际的宽度其实是二五六零的，所以才造成了左右这样两个空白。 但是呢，随着我们屏幕的不断缩小，哎，比如说就到一九二零的这个时候，他就会完美的左右撑满， 然后呢随着我们屏幕的不断缩小，他也会等比例。这是我们上一节课第一个四大的设置方式，如果有小伙伴不记得这个是怎么设置的，可以再回去重新看一下， 嗯，随着他屏幕不断的缩小，哎，缩，缩小，缩小。比如说我们现在把它回复到一个，变成变成这个移动端比较小的一个方式，呃，比，呃比较小的一个屏幕尺寸啊，这时候他遇到的一个最主要的问题其实 就是，呃，本来是我们是一个横向占满的这么一个图片，哎，跑到移动端只占据了我们顶部，虽然他完整的展示了，但是呢他只展示了很小很小的这么一块，哎，呃，跟我们设计可能有一些那么不符，我们还是希望他，比如说， 哎，我们这不是我们的一个呃手机的一个这个界面吗？我们还是希望他尽可能的竖向也占满，然后展示的内容也比较的啊，符合我们的一个要求嘛。这时候我们就可以看一下 我们接下来第二个这里呃设置的一种方法。第二个 side， 我们还是先从四 k 开始看齐，四 k 的话大家能发现跟之前一样，呃，除了这个，我们这个中间的这个 heading 和这个 button 能在这个 图片上方进行一个显示，然后这个我们也是设置的是 slide the background 嘛，呃，它能横向在四 k， 它左右不会有任何的一个呃空隙，它会横向的一个占满 啊，而且呢但是呢随着我们，但是呢他遇到的一个问题就是啊，不可避免的就随着我们屏幕的缩小，大家可以发现一旦他比二二四零零要小了之后，比如现在是二二二七幺，他就会一点一点的把我们这边右右边开始吃掉， 他会保持我们高不变，也就是说高是八百他不变，但是呢会把我们右边二四零零一点一点吃，相当于一个卷轴从右往左不断的缩小，缩小，缩小也就导致了如果我们到移动端去进行看他，比如说回到我们刚刚这个这个中间三七五，就 就会发现几乎他只展示我们左边这么一小块，其实在右边这一块还有很多的一个内容，但是就被吃掉了，这个也是不符合我们。嗯一个设计需求的， 这时候如何解决这个呢？我们还是回到我们的 oxygen 编辑页面，照例呢，我们把我们的 structure 打开，我们也可以看看一下之前的 section 里头 slider， 我们添加了 slider element， 然后里头有三个 slide， 这是第一个 slide， 然后我们目前看的是第二个 slide， 包括 啊第三个 slide 是没什么用，我们可以直接把它就删掉就可以了。呃，第一个 slide 和，呃就是第一个 slide 的话，就如果你要求设计感没那么高的话，就可以使用这个第一个 slide， 它也设置相对简便，然后展示的效果呢，也相对可以，就基本能达到一个展示的效果。但是你如果追求上 稍微高一点，我们会也一般建议还是使用我们第二个 sty 的这种设置方式，并且我们会遇到需要使用到我们左上角这样一个移动适配。 呃，移动适配是什么意思呢？就是我们目前大家可以看到它是我们处于在一个 full screen， 也就是最大电脑端，其实它目面向的就是一个我们四 k， 就是在我们这里四 k， 对，也就是目前是在我们四 k， 大家我鼠标悬浮在这，大家能看到这个四 k 是二五六零。哎，这样的一个宽度，我们设设置的图片尽可能的要符合 这样一个宽度。一般来说我的建议还是就一般一九二零就够了，大家如果愿意设置二四零零啊，什么也都可以。嗯，但是呢，呃，随着我们移动端的一个适配，我这里只给大家展示一 一个，就是一个是最最大的，还有一个呢，就是 less than 这个 four hundred eighty pixels。 哎，这一个中间呢，其实他们设置都是一样的，但是通俗上来讲我们还是为了讲究一些效率。一般我们只会设置两个，一个是电脑端，一个就是移动端， 嗯，这两一个不同的一个展示的一个，呃呃，不同的展示的一个不同的设置，他们会应用不同的设置， 就我们目前如果只设置了这个最左边 four screen， 它再比如说到这里是这个 啊，笔记本平板、手机横端以及一个手机竖端展示，他都会延续应用我们这个 full screen 的所有的设置，他会默认的继承，就如果我们不对他进行设置的话，他都会沿用这这个设置的大小，也就我们图片是高八百，哎，他 如果我们这里在 fallscreen 里设置的，比如说像这个图片是八百，这个是二四零零，哎，虽虽然我们移动端的设备变小了，但是他一样会沿用这样的设置啊，为了打破啊，为了给不同的设备展示不同的信息呢，这时候我们就需要点击一下，哎，这个 我就以最右边这个，呃，四百八十 pixels， 呃，以下作为展示，一般来说我们设置这个就够了，我们点击下它， 这时候大家可以看到在四百八十的时候，其实我们的整个图片是没有进行一个完整的展示的。如何想进行完整的展示，我们其实是需要放第二张图片的，也就是在我们电脑端和移动端展示的，其实是两个完全不同的图片。设置的方式其实也是一样， 我们点击一下这个 slide， 点击这个 slide， 然后到 advance 里头 background， 大家可以看到 background 的这里头变成一 这种和黑色的啊，这种灰色的，其实他这就是意思，我们呃默认他有一个使用的一个意思，比如说我们现在能看到还是二四零零乘八百，这时候呢，我们需要做的，我们现在目前知道 我们目前这个宽是四百八，一般来说我们的移动端就是大家可以图片按四百八去设置就 ok 四百八，然后我们的这个高，因为我们之前也有设置这个这个 deep， 也就是我们在这个 deep 里头，我们可以去看一下也是它的 advance 里头它的 size， 我们会发现它也是默认继承了一个我们在 full screen 里设置的数值就是八百。 嗯，一般来说呢，我们在移动端八百是 ok 的，它基本会占据我们整个这个，嗯，手机的一个竖向的一个展示，但是在这里呢，我们需要为它单独设置 一个新的，呃， slide 的背景图片，我们点击这个 slide， 然后点击 background， 我们这里呢需要去修改，哎，这个 background image。 这里呢我可以给大家，比如说我们现在可以改成不是二四零零了，我们现在有一个新的图片就是四八零， 然后乘以的话就是八百，呃，就 ok。 嗯，然后这时候大家可以看到其实我们这个图背景的图片已经有所改变了。呃，这个字有点挡住，我可以把颜色给大家调一下，比如说我这里来个 换成这个二二嗯三，哎，这就是个绿色，大家能看到这个颜色其实是不一样了。呃，那我们比如说这时候再去点一下 four screen， 大家会发现它还是黑色的，但是呢，我们到了移动端，它展示的是完全不同的这么一张图， 完全不同的这么一张图。然后呢，我们这时候有时候看呢，他可能，然后为了看的更仔细一点，我们可以把这个 heading 和这个 bottom 战时的进行一个隐藏。 哎，这时候大家可能看的更加形象一点了，这个图片就一个比较完整的就给展示出来，当然他可能现在还是稍微有一点偏右，那这这这个的意思可能还是我们这图片设置的尺寸会稍微有一点大，我们调整一下这个尺寸就 ok， 我们继续看一下， 我们把这个四百八，比如说我们来一个四百五，还是 是稍微大了点，四百二，那就四百吧。 ok， 大家这个四百就会比较，嗯，一个完美的一个就是我们数值，就是这整个我们是图片，比如说我们设置的就是一个四百乘八百的这样一个 嗯，尺寸，然后我们上传到我们的网站里头，他就会一个比较完整的，从他的左边、右边、上面、下边都会一个比较完整的形式进行一个呈现 啊。当然我们现在这是因为纯色嘛，我们自己做图的时候肯定会在背景加一些其他的背景图案，嗯，完成这么一个图片的一个设计，这就显得非常的高大上高档。然后这时候我们可以把这个 heading 和 button 给删除掉，哎，啊，我们删除掉是一个纯色的一个展示方式，我们保 存一下， ok， 保存完之后呢，我们到我们的前端，我们把它刷新一下，然后看到这是我们的第一个 slide， 然后呢这个是我们的第二个 slide， 我们照样呢就是大家可以看到在电脑端它现在展示的还是二四零零乘八百， 我们把 inspect 打开，大家能看到在四 k 端他是二四零零乘八百，有一个完整的一个展示，然后随着我们屏幕比例不断的缩小，我们当时设置的断点应该是四百八，大家可以看到我们不断的随着我们不断缩小，哎，一到四百八的时候， 大家发现他就进行呃，替换成了我们设置的这么第二张图片，也就在我们所有的移动端都会以这样的图片进行一个展示，然后呢随着他变大又回到了我们二四零零，哎， 乘八百，这样呢，我们基本就能做到一个至少是一个电脑端和移动端两个都相对比较完美的这样一个展示。 ok， 我们回到这里，大家可以再看一下这样的一个结构，大家也可以在我们这个嗯， deep 里头装一些自己所需要的一些 heading 或者 button 或者一些 tax， 大家都可以根据自己的需要去进行一个添加， 这样呢，相信大家都能设计出一个比较嗯，完美的一个首页的轮播图。 ok， 这个视频就先到这里。

现在我们看一下这个鹅毛海豹是怎么安装，然后我们在模块里边选择拿一个自定义去拖到，拖到这边， 然后打开店铺图片空间，这三张就是冷漠海报，我们依次依次把它 在这里，这里就是用这个，还是在刚才那个网站搞定设计，你们用这个轮毂工具 打开之后，我们直接在这里，他是有图片的，然后直接在这里把图片粘贴上去， 然后下面这里是选择最硬的一个产品链接，我们在店铺找到 这里设置好之后，我们在这里动向设置里边把这个取掉，间隙改成二十， 因为你不改的话，他两个图形中间会有一条白色的，白色的间隙，这个看上去就不是一个整体，影响美观，其他的我们用默认的就可以。贴好之后我们选择生成代码 复制，还是回到刚才店铺装修的页面，在这个自定义内容区里编辑，然后标题这里选择不显示，还是用这个圆满 把刚才的内容粘贴上去，注意一下他这个后台是有个 bug， 有时候就是你粘贴上去，这里是没有一个确定选项，我们把它关了，然后再打开这里就有确定， 我们预览一下效果，这个面包海报就做完了。