用CSS、JS实现三角形、轮播图和动画盒子

三角形

用CSS边框可以模拟三角形的效果。

1. 首先将盒子的高度、宽度设为0。
2. 四个边框都要写，只给有需要的边框设置颜色，其余设置为透明。
3. 为了照顾兼容性，低版本的浏览器可以加上font-size:0;line-height:0;
   这是未设置透明的效果：

div{
   
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-left: 50px solid yellow;
      border-bottom: 50px solid blue;
    }

例如我们需要向下的三角形，将除了top以外的颜色都设置为透明即可。

div{
   
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-top: 50px solid red;//top一定要写在下面才能覆盖
    }

轮播图（CSS+JS）

首先确定布局是div+li的布局，确定好布局后完善样式，在CSS中要写一个active类显示当播放时该图片会显示出来，这里我用的办法是z-index:100，即将当前图片放在最上层。

.item.active {
   
      z-index: 10;
      opacity: 1;
    }

重点是Js部分的编写，首先是对每张图片进行遍历，获得索引值，确定选中方法activeIndex()，给当前item加上active类，当然在此之前要先清除上一次的active样式。

 function clearActive() {
   
      for(