一、思路
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>