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