轮播图怎么做

轮播图的做法如下：

首先就是要构架好整个轮播的盒子，以及它所需要的内容（是为了轮播切换图片的时候不会出现空白）。

然后就是设置轮播盒子的大小以及里面按钮的样式。先做一个页面的css初始化再开始设置样式设置轮播盒子大小和轮播图片大小（将浏览器缩小到50%看到的效果）。

设置定位将图片固定在轮播盒子里，再设置轮播最初显示的第一张图片出现在轮播盒子里（要设置行内样式才能获取得到），设置轮播切换图片的四个按钮。

思路：

轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面，还有网易云音乐App的发现模块主页。

主要通过一个展示盒子，一个图片储存盒子，展示盒子的大小即为轮播图想要展示图片的大小，或者说一个图片的大小。但储存盒子的宽度必须大一些，足够所有的图片左浮横向排列。后将储存盒子的溢出部分隐藏，再调用动画特效animation。

轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。

钻石展位：（官方解释——钻石展位展示网络推广是以图片展示为基础，精准定向为核心，面向全网精准流量实时竞价的展示推广平台。）通俗的说，就是我提供一个网页位置，你可以在我提供的位置上以图片的形式打广告。这个位置就是钻石展位，这边用到的图片就是钻石展位图。

举例说：淘宝首页（电脑、手机都算），顶部的大图位置，就是钻石展位，这边的图片就是钻石展位图。还因为它有多张图片轮播，所以这边的图片也是轮播图。

最近，碰到一个问题，就是APP或者移动端的网页轮播图总是点击率不高，又或者说，总是，首图的点击率会高一些，但之后的几张轮播图，几乎上很少有人会主动去切换或者等待下一张轮播图出现，点击率下降严重。以下通过一些产品的轮播图，对比下，当下的轮播图，如何更好的吸引用户？

可以说，轮播图的设计初衷，是为了吸引用户，占据的位置也往往不小。根据人的视觉习惯，在首次打开APP的瞬间，眼睛第一处看的地方，往往是距离首屏顶部位置的1/4左右，（这个不凡多打开几个App试下）然后用眼的习惯，由上——》下，由左——》右。因此，对于初次进入首页的用户来说，轮播图本身也是足够显眼，但是首页的点击率并不高的话，可以试着按照以下思路分析：

1、关于位置，App首页侧重点：

（1）下图是我打开的某款运程类App，设计风格主要突出的各种测算分类和入口，加之轮播图并不大，因此往往给人一种可以直接略过的感觉。用户的使用习惯，往往是，面对自己不感兴趣，或者过多广告的东西，会直接采取无视，这个可以根据用户热力值分析得出（本文不做过多描述）

（2）以下是另一款心理测试类的App的轮播图，摆放位置上，可以说是突出了轮播图，并且，轮播图的尺寸也较大，可以说在视线已然处于黄金位置

因此位置的摆放上，以及整个页面的突出感，是会给用户一定的暗示，比如，这个轮播图，我是不是会想主动去点，也存在一些关联。

（2）样式

样式上的影响，相当于是给用户更多的一个心理暗示，比如，这种突出的大线条，会比另一种的单纯圆点的样式，更有让人点击的欲望，这是因为，大线条在视觉上就会给人一种，这个东西，我是可以点击的，滑动之后，除了图片，样式上也很明显，就是下一张了

（3）内容

重点来了，上述的描述，都是为了让用户能一眼看见轮播图，提高轮播图曝光的机率，但是，最重要的，还是内容，内容为王，真的不是说说而已。

以下是某宝的轮播图，仔细看内容部分，主要就是文案+按钮，文案要怎么想，涉及另一个方面，这边想显示的是，文案上的突出，重点关键字，比如，打折了，突出XX折扣，对于用户来说，第一眼就要抓住他们的心，最好不要让他们动脑，而是一眼可以看到他们想要的东西。

有些位置的轮播图，类似如下图，位置比较小，并且处于不同的模块之间，这时候，不管是广告设计上，或是文案上加上按钮之类的，都要注意：暗示客户，该位置是可以点击的，并且尽量吸引人点击。如果只是在这个位置随便加个横幅，给人的感觉往往只是，哦，这个地方有个广告呀，忽略，忽略。

以上，只是一种大概方位上的轮播图吸引用户的点击方案，具体的包括样式上的设计，哪一种样式，更有可能吸引用户，都可以拉出来，对比说上很多，也只是说上首个轮播图的点击率或可以怎样提升，但对于，往后的几张轮播图的点击，或者，该位置到底适不适合轮播图，未做具体阐述，先暂时说到这，后续如有更多了解再行补充！

---