一、思路
1.利用zIndex属性调整层级,同时搭配opacity透明度属性,利用定时器以及过度属性实现淡入淡出;
2.箭头切换以及索引圈均使用与前2个案例类似的办法实现;
二、步骤
1.构建基本结构样式
2.添加淡入淡出事件,封装为一个方法,定时器调用,由于已经有了前2个案例的基础,这里直接考虑到鼠标点击箭头切换时的传参问题;
默认right,从前向后淡,left从后向前淡;利用zIndex让图片循环成为最高层/最底层,然后只需控制最高层/最底层以及相邻的层的透明度即可实现淡入淡出效果;与jS简单图片预览中讲到的切换方式思维一致;
//淡入淡出事件
function shift(way) {
for (var i = 0; i < imgg.length; i++) {
var index = imgg[i].style.zIndex;
if (way=="right") {
index++;
if (index==6) {
imgg[i].style.opacity=0;
}
if(index==5){
imgg[i].style.opacity=1;
}
imgg[i].style.zIndex=index>=6?0:index;
}
else{
index--;
if(index==-1){
imgg[i].style.opacity=1;
}
if(index==5){
imgg[i].style.opacity=0;
}
imgg[i].style.zIndex=index<0?5:index;
}
}
}
3.完善代码,添加索引圈以及鼠标进入离开事件,实现代码与轮播效果和无限滚动方式一致;
4.添加索引圈另一效果:鼠标进入任意一个索引圈,显示相应的图片;这是需要分2种情况,进入的索引圈在当前播放图片之后,只需切换两者差值次图片;若进入的索引圈在当前播放图片之前,则需要切换两者差值加一周次图片;
注意:差值=进入索引圈-当前索引圈
//索引圈进入事件
for (var j = 0; j <circle.length; j++) {
circle[j].index=j;
circle[j].onmouseenter=function(){
var cindex=index;//利用index记录当前播放的图片
for(var k=0;k<cindex;k++){
circle[k].style.backgroundColor="";
}
circle[this.index].style.backgroundColor="red";
//差值
var chazhi=this.index-cindex<0?this.index-cindex+6:this.index-cindex;
for(var i=0;i<chazhi;i++){
shift("right");
}
}
}
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入淡出效果</title> <style> *{margin: 0;padding: 0;} html,body{width: 100%;height: 100%;} .block{ width: 800px; height: 400px; margin: 80px auto; position: relative; border: 1px solid red; } .box{ width: 4800px; height: 400px; float: left; } img{ width: 800px; height: 400px; position: absolute; transition: all 1s linear; opacity: 0; } .spanleft{ font-size: 60px; font-weight: bold; position: absolute; top: 150px; left: 10px; color: white; z-index: 10; } .spanright{ font-size: 60px; font-weight: bold; position: absolute; top: 150px; right: 10px; color: white; z-index: 10; } .cir{ width: 150px; height: 20px; z-index: 7; position: absolute; bottom: 10px; left: 320px; } .circle{ width: 10px; height: 10px; border: 2px solid grey; border-radius: 50%; float: left; margin: 0 5px; } </style> <script> window.onload=function() { var imgg = document.getElementsByClassName("imgg"); imgg[0].style.opacity=1; //调整层级 for (var i = 0; i < imgg.length; i++) { imgg[i].style.zIndex = imgg.length - i - 1; } //定时器 var time = setInterval(function () { shift("right"); },2000); //左右箭头点击事件 var spanleft=document.getElementsByClassName("spanleft")[0]; spanleft.onclick=function(){ clearInterval(time); shift("left"); spanleft.style.cursor="pointer"; }; var spanright=document.getElementsByClassName("spanright")[0]; spanright.onclick=function(){ clearInterval(time); shift("right"); spanright.style.cursor="pointer"; }; //索引圈事件 var circle=document.getElementsByClassName("circle"); circle[0].style.backgroundColor="red"; var count=0; //鼠标进入事件 var block=document.getElementsByClassName("block")[0]; block.onmouseenter=function(){ clearInterval(time); }; //鼠标离开事件 block.onmouseleave=function(){ time=setInterval(function(){ shift("right"); },2000); }; //淡入淡出事件 var index=0; function shift(way) { //索引圈切换 if(way=="right"){ circle[count].style.backgroundColor=""; count++; if(count>=6){ count=0; } circle[count].style.backgroundColor="red"; } else{ circle[count].style.backgroundColor=""; count--; if(count<0){ count=5; } circle[count].style.backgroundColor="red"; } //图片切换 for (var i = 0; i < imgg.length; i++) { index = imgg[i].style.zIndex; if (way=="right") { index++; if (index==6) { imgg[i].style.opacity=0; } if(index==5){ imgg[i].style.opacity=1; } imgg[i].style.zIndex=index>=6?0:index; } else{ index--; if(index==-1){ imgg[i].style.opacity=1; } if(index==5){ imgg[i].style.opacity=0; } imgg[i].style.zIndex=index<0?5:index; } } } //索引圈进入事件 for (var j = 0; j <circle.length; j++) { circle[j].index=j; circle[j].onmouseenter=function(){ var cindex=index;//利用index记录当前播放的图片 for(var k=0;k<cindex;k++){ circle[k].style.backgroundColor=""; } circle[this.index].style.backgroundColor="red"; //差值 var chazhi=this.index-cindex<0?this.index-cindex+6:this.index-cindex; for(var i=0;i<chazhi;i++){ shift("right"); } } } } </script> </head> <body> <div class="block"> <div class="box"> <img class="imgg" src="./image/box1.jpg"> <img class="imgg" src="./image/box2.jpg"> <img class="imgg" src="./image/box3.jpg"> <img class="imgg" src="./image/box4.jpg"> <img class="imgg" src="./image/box5.jpg"> <img class="imgg" src="./image/box6.jpg"> </div> <span class="spanleft"><</span> <span class="spanright">></span> <div class="cir"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div> </body> </html>