利用css+js制作广告轮播

现在一般的网站都有广告轮播的部分。参考了网上零零散散的教程，今天尝试自己做了各轮播的效果。放不了效果视频，就放个图片吧。
如下

四张图片在滚动，每隔5秒向后跳一张，下方的四个点像走马灯一样一个个循环

图片转换过程采取淡入淡出的渐变方式

鼠标悬停在图片上方会出现，左右两个箭头。点击可以实现向前或向后跳转。当然点击下方的四个点也可以跳转。基本上就是常规的广告轮播。

实现方法、
html部分

css部分

.ad{
	display: block;
	width: 533px;
	height:300px;
	overflow: hidden;
	float: right;
	position: relative;
}
.prev-button{
	position: absolute;
	z-index: 400;
    width: 44px;
    height: 44px;
	top: 130px;
	left: 10px;
	cursor: pointer;
}
.slide:hover{
     background-color: rgba(220,220,220,.8);
}
.next-button{
	position: absolute;
	z-index: 400;
    width: 44px;
    height: 44px;
	top: 130px;
	right: 10px;
	cursor: pointer;
}
.slide{
	width: 44px;
    height: 44px;
	background-color: rgba(220,220,220,.5);
	border-radius: 22px;
	overflow: hidden;
	cursor: pointer;
}
.slide-point{
	z-index: 200;
	width: 128px;
	height: 16px;
	display: block;
	position: absolute;
	bottom: 20px;
	left: 10px;
}
.on{
	background: rgba(242,250,36,.8) !important;
}
li.first-point{
	background: rgba(242,250,36,.8);
}
.slide-point-focus{
	float:left; 
	margin-right: 16px;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background:rgba(95,57,55,.8);
	transition: background 1s;
	cursor: pointer;
}

.prev{
	border: none;
	outline: none;
	width: 30px;
	height: 30px;
	background: transparent;
	background-image: url(../img/left.png);
	cursor: pointer;
}
.next{
	border: none;
	outline: none;
	width: 30px;
	height: 30px;
	background: transparent;
	background-image: url(../img/right.png);
	cursor: pointer;
}

箭头制作：
我的前后箭头是用两张 ><符号的png照片，再在其放在一个div容器中，将容器背景利用border-radius 设置成圆形，添加上颜色，制作成的。如果要实现半透明的效果最好的是利用rgba()设置背景色。opacity会影响其内部元素的透明度。
然后将id='ad‘整个div容器设置为relative，箭头所在容器设置为absolutive，利用绝对定位，将其放在左右。为了不被图片覆盖，还需要将其z-index设置在上方，一开始的opacity设置为1（或者将某一张开始设为1且要放最上方。不然一开始没图片显示）。opacity设置为渐变 transition。

图片部分：
四张图片都采取绝对定位。外部容器相对定位。图片的左上角都为0，0.这样子4张图片就叠在一起。利用opacity属性设置图片的循环显示（四张图片任一时刻只让一张的opacity为1，其他为0，只要利用js设置好变化顺序，那么就会表现出轮播的效果）

底部四个小点：
利用css画四个点（border-radius+background-color），设置好四个小点的间距。z-index要设置在图片之上。再多建一个 .on的样式，与一般样式slide-point-focus不同点在于背景颜色（用来标注当前页面）

js代码

制作这个简单的轮播花了我老久了（主要太菜)。卡最长时间的是鼠标移入移出，显示箭头，一开始我将箭头设置为响应对象。麻烦事很多。用visibility：hidden；发现隐藏不了元素。用display：none；倒是可以了，但是会闪烁（原因见【1】）。网上说用onmouseleave和onmouseenter可以解决，但是我试过不行（原因见【2】）。但是可以在要隐藏元素外面再套一个元素。将外面这个元素设为响应对象，注意这个外部不元素要有固定大小，再使用display：none。但是这种方法最终效果不好。因为按钮太小了，不好找。后来将整个图片设为响应对象。效果好多了，也简单多了。

【1】
opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

【2】onmouseleave和onmouseenter二者的本质区别在于,museenter不会冒泡。如果元素仅仅是不可见，那onmouseenter应该可以解决闪烁的问题。但是我是将元素删除了。所以主要问题不在访问子元素（？？大概）。