现在一般的网站都有广告轮播的部分。参考了网上零零散散的教程，今天尝试自己做了各轮播的效果。放不了效果视频，就放个图片吧。
如下
四张图片在滚动，每隔5秒向后跳一张，下方的四个点像走马灯一样一个个循环
图片转换过程采取淡入淡出的渐变方式
鼠标悬停在图片上方会出现，左右两个箭头。点击可以实现向前或向后跳转。当然点击下方的四个点也可以跳转。基本上就是常规的广告轮播。
实现方法、
html部分
<div id="ad" class="ad" onmouseover="mouseover(this,1)" onmouseout="mouseover(this,0)">
<!-- 向前箭头 -->
<div class="prev-button" name="slide-button" onclick="add(-1)">
<div class="slidePrev slide" id="prev" >
<button class="prev" type="image"></button>
</div>
</div>
<!-- 四张图片 -->
<ul class="pic">
<li><a href="https://www.baidu.com" target="_blank"><img name="adimages" class="adimage" src="img/index1.jpg" alt="广告" style="z-index: 10;"></a></li>
<li><a href="https://www.bilibili.com" target="_blank"><img name="adimages" class="adimage" src="img/index2.jpg" alt="广告" ></a></li>
<li><a href="https://www.163.com" target="_blank"><img name="adimages" class="adimage" src="img/index3.jpg" alt="广告" ></a></li>
<li><a href="http://www.haoliners.net" target="_blank"><img name="adimages" class="adimage" src="img/index4.jpg" alt="广告" ></a></li>
</ul>
<!-- 下方4个小点 -->
<div class="slide-point">
<ul>
<li class="slide-point-focus first-point" name="points" id="1" onclick="change(0)"></li>
<li class="slide-point-focus" name="points" id="2" onclick="change(1)"></li>
<li class="slide-point-focus" name="points" id="3" onclick="change(2)"></li>
<li class="slide-point-focus" name="points" id="4" onclick="change(3)"></li>
</ul>
</div>
<!-- 向后箭头 -->
<div class="next-button" name="slide-button">
<div class="slideNext slide" id="next" onclick="add(1)">
<button class="next" type="image"></button>
</div>
</div>
</div>
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代码
<script>
var timer = null;// 计时器
var index = 0;//当前图片下标
//startTime表示计时函数，即到时间应该做什么操作。这里是，时间到了将所有图片的opacity设置为0，再将下一张图片的opacity设置为1。同时将图片所在图层放最上方（不然点击的时候链接一直是同一个）
startTime = function(){
index++;
if(index>3){
index = 0;
}
images = document.getElementsByName("adimages")
points = document.getElementsByName("points")
for(var i=0;i<images.length;i++){
points[i].className = "slide-point-focus";
}
points[index].className += " on";
for(var i=0;i<images.length;i++){
images[i].style.opacity = 0;
images[i].style.zIndex = 0;
}
images[index].style.opacity = 1;
images[index].style.zIndex = 20;
console.log(index);
}
//设置跳转时间间隔
timer = setInterval(startTime, 5000);
//这是点击左右箭头的操作。只需要将index+1，计时器清空，重启即可。
function add(type){
clearInterval(timer);//清空计时
index += type;
index = (index+4) % 4;
console.log(index);
images = document.getElementsByName("adimages")
points = document.getElementsByName("points")
for(var i=0;i<images.length;i++){
points[i].className = "slide-point-focus";
}
points[index].className += " on";
for(var i=0;i<images.length;i++){
images[i].style.opacity = 0;
}
images[index].style.opacity = 1;
timer = setInterval(startTime, 5000);//重启计时
}
//这个是点击下方四个点的动作。只要将index设置为相应的位置即可。
function change(index1){
clearInterval(timer);
index = index1;
images = document.getElementsByName("adimages")
points = document.getElementsByName("points")
for(var i=0;i<images.length;i++){
points[i].className = "slide-point-focus";
}
points[index].className += " on";
for(var i=0;i<images.length;i++){
images[i].style.opacity = 0;
}
images[index].style.opacity = 1;
timer = setInterval(startTime, 5000);
}
//这个是鼠标悬浮在图片上会显示左右箭头的js代码。
function mouseover(cursor,i){
next = document.getElementById("next");
prev = document.getElementById("prev")
if(i==0){
next.style.display = 'none';
prev.style.display = 'none';
}else{
next.style.display = 'block';
prev.style.display = 'block';
}
}
</script>
制作这个简单的轮播花了我老久了（主要太菜)。卡最长时间的是鼠标移入移出，显示箭头，一开始我将箭头设置为响应对象。麻烦事很多。用visibility：hidden；发现隐藏不了元素。用display：none；倒是可以了，但是会闪烁（原因见【1】）。网上说用onmouseleave和onmouseenter可以解决，但是我试过不行（原因见【2】）。但是可以在要隐藏元素外面再套一个元素。将外面这个元素设为响应对象，注意这个外部不元素要有固定大小，再使用display：none。但是这种方法最终效果不好。因为按钮太小了，不好找。后来将整个图片设为响应对象。效果好多了，也简单多了。
【1】
opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。
【2】onmouseleave和onmouseenter二者的本质区别在于,museenter不会冒泡。如果元素仅仅是不可见，那onmouseenter应该可以解决闪烁的问题。但是我是将元素删除了。所以主要问题不在访问子元素（？？大概）。
扫一扫
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
