js-轮播图-小米官网

最近一直再看基础知识,打算将基础知识与实力结合起来,第一个要写的就是轮播图,他的难度不算高,对我可以提升对各种方法的使用,锻炼动手能力。

那么为了强化我的记忆,我将详细的过程写在博客中,希望对大家有所帮助。

第一步,将小米官网上轮播图的几张图片保存下来~

进图官网,在图片上右键,点击检查
这里写图片描述
双击img之后的地址,并在新网页中打开,怎么保存我就不用多说了吧~

第二步,写代码(html+css)

在任意编辑器上都可以,我到目前一直用的都是vscode,轻量级,插件多很方便。

在这里先做分析,一个完成的轮播图大致分为三部分。

1.图片部分。
2.左右按钮,分别对有向左滑,向右滑。
3.右下角对应是第几张图片的小点。
这里写图片描述

三部分相互独立,没有关联,我们一个一个解析~

第一部分

图片部分
这里写图片描述
具体的样式布局我会在最后贴出,我相信大家一看就会明白。
写好了图片,此时的图片是一个一个往下排的,我们需要让他们叠在一起。

这里我们就需要了解什么事文档流
文档的默认排列规则,就叫文档流,字面意思,文字图片等等是不会叠加的。
所以我们要违背这个原则,他又叫脱离文档流。自己建立一个新的规则,不影响在文档流中的其他元素

注意:这里有两种方法去实现
定位 (绝对absolute 相对relative 静态static 固定fixed) 绝对固定可以完全脱离文档流。如果你的元素不受滚动条的影响,就用固定定位
浮动 (并没有完全脱离)

效果图太大就不贴上来了,当我们图片处理完后,下一步就是左右按钮。

第二部分

左右按钮部分
我在网上截了两张图片,这里写图片描述
很随意,我们设置他的样式,在这里加了一个小技巧,其实没有任何难度。
当我们鼠标放上去的时候,出了 cursor: pointer; 我们还可以将她的透明度设置为0.5,即 opacity:0.5; 这样可以让变化更明显。

请注意,我们仍然需要给左右两个按钮设置绝对定位,否则,他们会被遮盖住

这里写图片描述右边也是如此,话不多说。

第三部分

右下角按钮部分


接着昨天晚上的写~

右下脚按钮也是很简单的,说实话我个人非常喜欢html+css这一部分,他并不难,但是想要做出绚丽的效果,这需要功夫,我自己的功夫还不是很到位,在这里就不多说了。

对应五张图片,所有我们写也写五个
这里写图片描述
其对应的css样式呢也不难,思路1.将其放置在整体的右下角 2.将五个点左浮动 3.五个点的鼠标效果~

这里写图片描述

到这里所有的布局就结束了,下面大概写一下js的代码(这里原生js和jq做到的轮播效果一样,他们原理也很相似,虽然我对jq了解不深,但它胜在简单易懂,这里我用jq来实现这个功能)。

第三步、写代码(JQ)

首先,我们需要将除了第一张图片以外的其他图片进行隐藏,同时,当图片处于第一张的时候,右下角的圆点也要显示为被选中的状态。

1.隐藏图片 找到包含图片的模块 加一条 display:none;
2.在html文件中,找到第一张图片,给他加一条行内属性 style = “display:none;”
3.找到第一个圆点,为它加一个被选中的样式,样式和鼠标滑过样式相同;

接下来的思路就:
1.图片的 显示方式 会传递到下一张图片上
2.圆点也同理,圆点的样式也会传递到下一个原点。
3.鼠标点击哪个圆点,就会显示对应的图片(优先级高)
思路往后会有很多延伸,我就不细说了

那么请看下面代码,我在代码中有写代码的意义,
这里是,小按钮对应滑动图片的代码

这里写图片描述
这是我第二次见到JQ代码,但这不影响我去理解它,甚至去使用它。 全面的代码我会放在github上请大家注意~

这里是右按钮对应的效果

这里写图片描述

在这里我留下个小悬念,那么就是左按钮如何写呢?我们一起思考。

最后一步,我们需要给整个轮播图加一个定时器,在没有接触前我感觉这一步应该是最难得,当写出来后,我发现他并不难,只要你的思路清晰。

这里写图片描述

首先我们给他加一个定时器 setInterval (函数 , 时间间隔“毫秒”)
重复 我们要做的函数,并且设置重复的时间,而我们这个轮播,所要做的就是重复向下一张图片切换,即向右切换。
到这里轮播图大概就是全部完成了,具体效果已经代码都在github上~~
预览地址
这是代码

展开阅读全文

没有更多推荐了,返回首页