欢迎光临企业网站推广全程服务

企业网站推广

10年网站推广经验,之前与我们合作的企业代理商已经推广网站推广开始赚钱了,超越同行不是梦

大型网站首页幻灯片效果实现,至此前端三剑客算是基本入门了

作者:jcmp      发布时间:2021-03-17      浏览量:0
在某宝、某东、某米等大型网站的首页,在非

在某宝、某东、某米等大型网站的首页,在非常重要的位置都有一个商品展示的幻灯片组件,循环切换展示当前热推商品,在各个培训班的前端课程中,幻灯片的制作也是作为阶段性的压轴之作进行传授。幻灯片效果基本上涉及到了Html、CSS、Javascript、jQuery的精髓内容,制作完成之后,对前端的基础知识基本有了较为全面的理解了。

一、需求分析

幻灯片结构上包含图片、指示点、向左、向右两个按钮,要实现网页加载后自动循环播放,点击每个指示点能跳转到指定页,左、右两个按钮可以实现左右两个方向的顺序切换,另外,鼠标经过时,循环播放暂停。

二、结构分析

为了便于网页整体布局,可以将所有元素用一个div盒子包起来,循环播放的图片可以放在li元素里,指示点可以放在另一个li元素里。左、右两个按钮可以用背景图片或者文字制作。

三、样式设计

div盒子、图片li的宽、高均设置为图片大小。Div盒子可以根据网页总体布局设置好位置,作为其他元素的父级,其定位方式position设置为relative,主要是为了子级元素进行绝对定位。图片和指示点ul的list-style设置为none,第一个图片li的位置设为left:0,top:0,其他图片li的位置为left:图片的宽度。指示点可以将li的宽和高设置成一样,再用border-radius:50%属性将正方形变成圆形(圆点),背景色就根据个人喜好设置了。

四、切换原理

五、核心代码实现

定义一个move函数

主代码,各种情况下的move函数调用:

大型网站首页的幻灯片切换效果就做好了,至此,Html、CSS、Javascript、jQuery的基础知识应该了解得比较全面了,再看网页其他部分的结构和样式就有点小菜一碟的感觉了。

------------------------------------------------------------