这是一篇学习笔记,在有一点HTML基础上,又通过青训营的课程进一步学习,包括也学习了css布局和js的一部分,我对华为商城网站的轮播部分进行了分析,结果我发现他的轮播用的方式是,把图片都放在同一个位置,然后进行直接轮换,并且没有加动画,怎么说,而我当时想的方式是把图片左右排放改变位置,利用平移,实现无限轮播,并且在上面加一点动画,看起来会比较好看,比较完美吧,但是当我来分析这个网站的时候,发现他却不是这样做的,也算是让我学习了另一种轮播的方法。虽然我感觉他没有达到很完美,但是从其他方面来说,比如说他的HTML语义化与非语义化,相比较而言,还是非常的可以的,值得我学习,包括他的HTML结构以及他的CSS样式编写,他的对相同样式的提取,以及js结构的写法。 总的来说,对这个网站进行HTML结构分析还是会对新手来说有很大的帮助,比如说是我这样子的,当然我并没有完全把它给分析完,毕竟他这也是属于一个大的网站,里面的数据以及结构以及网页跳转,还是有很多的,我只是对其这一个结构先进行了分析。 那么总结一下轮播图的原理:那就是一系列大小相等的图片进行平铺,利用CSS布局只显示一张图片,其余隐藏,当然,为了实现轮播,可以通过JavaScript编程计算偏移量并利用定时器实现自动播放,或通过手动点击事件实现切换图片。当然JavaScript的定时器指的是setInterval函数,它的效果是每隔你定义的参数的秒数之后便会实施函数当中所定义的语句执行,然后重复以上操作,从而实现无限轮播。隐藏在js当中使用的语句的属性是overflow,把他的值设置为hidden,那么你就会实现隐藏效果。 需要注意的是,在写函数里的执行语句时,一定要仔细认真看好你所写的执行语句是根据什么来改变图片的位置,使其显示,同时还要注意里面的dom操作,到目前为止,由于我只学过HTML CSS以及js的一部分,我能想到的写的方法只有通过HTML CSS以及JS代码加上dom操作来实现无线轮播。当然,也包括函数题里面,如果要使用for循环,那么一定要注意它的I的使用,同时也要注意可以用this,如果你在里面写到监听事件的语句,那么一定要注意,举个例子,如果是点击事件的话,在点击事件函数,里面想要得到当前点击的I所在的元素的话,是不能得到的,因为在没有点击的时候,for循环就已经执行完毕,你得到的永远是你最后执行的那个i,一定要注意这件事情,当然如果用this那么问题就会被解决,一定要注意。 这就是我学习分析网站的这一部分得来的总结。