js基础可以实现的几个特效

        学弟学妹们已经学完html和css了，接下来选择学习前端的学弟学妹就要学习js了，因此我现在先将记忆中能回想起来的几个js特效以及实现思路先写下来，以免到时候问起来我一下子想不起来。

1.轮播图

        轮播图可以说是js运用最广泛，最实用的特效之一了，写法也多种多样，这里就先把我知道的两种简单的轮播图实现方式及思路写下来。

（1）左右滑动式轮播图

这个轮播图的效果是图片左右滑动，默认的方向是图片从右向左滑动，实现的思路是先写一个盒子，然后盒子里写一个高度与其一致，宽度是他的n倍（n为图片有几张）的盒子，设置为position:absolute，在这个子盒子里再建立几个用来装图片的小盒子，高度一致，宽度与最开始的盒子一致，图片的宽高与这个盒子一致，盒子设置float：left;最后，再把最开始写的那个盒子设置为overflow：hidden；此时，只能看见一张图片，但是，随着我们改变中间的那个特别宽的盒子的left，就会改变展示的图片，只要left是图片宽度的倍数，就会控制展现不同的图片，这个时候只需要用一个定时器，来定期的改变left的值就可以了，同时还可以设置transition来加上切换动画，使其更加美观。

这个轮播图的实现方式很简单，但是有一个不得不面对的问题，就是当我们从最后一张跳到第一张的时候，是直接从最右侧以很快的速度划到左侧的，这其实有点不是很合适，为了解决这个，我们需要多设置一个放图片的盒子，当然，也得多一张图片，这个图片和第一张一模一样，举个例子：当我们的轮播图切换到最后一张，也就是新加的那张的时候，清除定时器，清楚transition，然后跳到第一页，然后把定时器和transition都加上，继续轮播，当第一张切换最后一张的时候，操作方法类似。

（2）显示隐藏式轮播图

这个轮播图的方法比上面简单的多，同样是建立一个大盒子，但是这次可以直接把所有图片都放到这里，设置透明度为0，然后加定时器，时间一到就给现在展示的图片的透明度设置为0，这里可以加上transition实现淡出，然后下一张要展示的设置为1，淡入，这样来实现图片的切换。

2.下拉框

在html里可以设置下拉框，但是那种下拉框适用于选择某一个属性，比如城市，民族之类的属性的时候使用，我们有的时候需要下拉一大块盒子，比如说点击之后，下拉一大块内容，这里只需要刚开始将height设置为0，然后加点击事件，点击之后height为1，设置过渡产生动画，就结束了。同时还可以用类似的方式，来写下拉框的收回，还有以此来将两个下拉框关联，比如说这个下拉框向下拉，此时点击另一个按钮，先判断前一个下拉框是否处于已下拉的状态，是的话就先收回，再下拉，不是的话直接下拉。