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

在某宝、某东、某米等大型网站的首页，在非常重要的位置都有一个商品展示的幻灯片组件，循环切换展示当前热推商品，在各个培训班的前端课程中，幻灯片的制作也是作为阶段性的压轴之作进行传授。幻灯片效果基本上涉及到了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%属性将正方形变成圆形（圆点），背景色就根据个人喜好设置了。

四、切换原理

切换原理主要是将当前图片放在div盒子中，其他图片都放在div盒子的右边，div盒子设置overflow：hidden属性，将盒子外面的图片隐藏起来。向左切换幻灯片时，将要进入div盒子的图片放至盒子右边，在循环播放或者点击事件发生时，将当前图片和要进入的图片添加animate动画，一起向左移动一张图片宽度。向右切换时，切换之前立即将要进入的图片放至div盒子左边，然后和当前图片一起向右animate一张图片宽度。

五、核心代码实现

定义一个move函数

主代码，各种情况下的move函数调用：

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

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

我是万师兄，从零开始学编程，慢慢分享我的学习体会，欢迎志同道合的朋友一起交流，一起进步。想要教程和源码的朋友点击关注哦！