HTML/CSS，轮播图 - 小柴同学

HTML/CSS(轮播图)

1.轮播图实现方式：通过定位的方式，改变left的值，形成轮播图的效果（也可以是从上到下翻滚的，改变top或（bottom））

2.script标签引外部js时，加上defer（加载完成html后，在加载js），避免获取不到元素的情况。

3.js获取外部css样式修改的时候，也就是没有在html文件里的样式，有可能js获取不到，所以上面代码中需要改变的left值，

还有图片还有外部盒子的宽度，我都写在了html里，也方便了如果图片大小改变时，只需要修改html文档就好，css和js代码都不需要动

4.写css把图片横向布局，并且通过overflow：hidden的方式把外面的图片隐藏

给ul设置定位，并把left设置为0px;也就是向左偏移为0（如果是上下轮播，图片纵向布局，top为0px）

1、使左右两个图片居中，根据图片的高度，（图片高度-箭头高度）/2

设置左右按钮居中
    lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+\'px\';
    rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+\'px\';

当鼠标放在图片上时,清除定时器
    pop.onmouseover=function(){
        clearInterval(timer);
    }
    鼠标离开定时器时,开启定时器
    pop.onmouseout=function(){
        timer=setInterval(rfspan.onclick,TIME);
    }