小柴同学

导航

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);
    }

posted on 2021-11-10 17:16  小柴同学  阅读(502)  评论(0编辑  收藏  举报