信析团队个人任务详解--陈增龙

首先这次任务的加分项并未全部完成,但是个人拓展了页面,也就是说
做了两个网页,第一个是团队任务,第二个是拓展网页

详解优劣:

1、不足:
首先并未用ps来获取要求中的logo和一些元素,所以并不能完全的按照任务要求来制作,这是一个问题。

二级菜单部分没有完成

轮播图点击切换图片也没有完成

拓展页面的排版太糟糕,只是按照它自己本身的浮动来默认排版

页首的导航栏版块部分的下拉列表被遮住了,这个问题后续需要弄明白缘由

2、遇到的问题:

在放置轮播图时没有没有在内联部分设置图片的长宽高等等,而是在css部分设置,这样子一是不太好管理各图片的大小,二是太容易混杂图片并且容易被修改

在制作导航栏时,出现了隐藏列表宽度出错,并且显示不出来的问题,后来通过查找视频有获得解决方法

在制作轮播图时,没有控制好计时器的应用,而产生了时间差的问题,即在一定时间范围内是正常的,而小于这个时间范围就会在图片还没有转到一张图片的位置的时候就转向了下一张图片。后来重新写了代码改了几处代码块就解决了这个问题

在设置切换按钮的点击事件时,有些弄混了。即在点击之后图片的index改变和计时器的调用,以及点击之后调用的转动计时器有矛盾

在设置图片廊的时候,没有考虑到图片本身的大小和宽高,而导致图片的大小不同,造成排版的视觉效果糟糕。

3、学习过程收获
在制作过程中,css和html是自己在菜鸟教程中通过文字来学习的,而js是通过视频来学习的。但是从这发现视频的效率要高些,而html和css的基础还不够扎实,后续需要通过视频来弥补。

导航栏部分经常会出现问题,但是每次解决了问题之后设置导航栏更加的驾轻就熟,但是不能说十分熟练,还是会出现问题。

关于轮播图的设置更有了思路,两个计时器的设定,一个是用来控制速度,另一个是用来控制图片的转换(也可以说是控制调用速度计时器的频率)

发现了自己在点击响应事件中,单单设置单个事件是没什么问题,但是在设置的事件与其他事件有关联的话,就会弄混其中的关系。所以以后需要多画图,帮助理解逻辑

在设置拓展页面的时候,回顾了图片廊的制作方法,也发现了自己在排版的方面的不足

代码详解:
这里挑一些部分来进行详解:
在这里插入图片描述
这里是设置中间那个view按钮的一个提示框,用于提示用户点击此处,跳转页面。
而这里用到了伪类,上面那部分是设置提示框的样式,下面部分是设置箭头的样式,用到了after伪类,而content是插入的意思。top50%是让箭头居中,right100%是让箭头在左侧,border-width是设置箭头的宽度,而重点是border-color,这里是设置了透明部分和黑色部分,来创建一个箭头在提示框的左侧

在这里插入图片描述
这里是设置下拉列表部分,首先设置下拉部分是hidden的,然后设置下拉部分的样式,再通过hover伪类来设置当鼠标访问到show的部分的时候就更改下拉列表的display形式

在这里插入图片描述

这里是设置控制速度的计时器,首先先获取对象的offsetleft(返回当前元素的相对水平偏移位置的偏移容器),然后通过计时器,每50毫秒就移动一次,每次移动的距离为speed+px,每50毫秒移动一次从而达到移动的效果,不断的获取,不断的重新赋值。然而当设置的速度不一定会全等于你的目标位置,所以需要用到<=符号,即在超过了之后马上将目标位置的left值赋值给对象,然后再在这个时候停止计时器,从而达到了每转一张图片就停止下来给用户观看,达到更好的视觉效果

在这里插入图片描述
这里是控制图片的函数,其实就是控制调用速度计时器的频率,而这个计时器的时间越长,那么图片停止后停留的时间就越长。轮播图最重要的就是计时器的嵌套。

发布了8 篇原创文章 · 获赞 0 · 访问量 320

猜你喜欢

转载自blog.csdn.net/Ninlo/article/details/104702482