html 淡出淡入轮播图,jQuery淡入淡出轮播图实现

大家好我是QD小白，这是人生第一次写博客，准备写的内容是Jquery淡入淡出轮播图实现，在此之前学习JS写的轮播图效果都感觉不怎么好，学习了jQuery里的淡入淡出效果后又写了一次轮播图效果明显感觉好了许多。现在我就来分享下自己写轮播图的思路和方法。

HTML部分：

src="http://mamicode.com/https:/img.ivsky.com/img/bizhi/pre/201909/25/abominable-003.jpg">

src="http://mamicode.com/https:/img.ivsky.com/img/tupian/pre/201902/13/zhulin.jpg">

src="http://mamicode.com/https:/img.ivsky.com/img/tupian/pre/201903/14/hailang-001.jpg">

src="http://mamicode.com/https:/img.ivsky.com/img/tupian/pre/201903/14/shalou-002.jpg">

src="http://mamicode.com/https:/img.ivsky.com/img/tupian/pre/201902/13/youcaihua-002.jpg">

src="http://mamicode.com/https:/img.ivsky.com/img/tupian/pre/201902/13/zile_duorou.jpg">

<

>

012345

HTML：

CSS部分:

*{margin:0;padding:0;

}#img-box{position:relative;border:25px solid #ccc;margin:100px auto;

}#img-box img{position:absolute;display:block;opacity:0;float:left;cursor:pointer;

}#img-box #img-left,

#img-box #img-right{position:absolute;width:65px;height:120px;border:4px solid thistle;border-radius:6px;background-color:black;opacity:0.6;cursor:pointer;color:#fff;font-size:30px;text-align:center;line-height:120px;

}#img-box #img-left{left:1px;top:31%;

}#img-box #img-right{right:1px;top:31%;

}#img-box #img-num{position:absolute;width:500px;height:50px;

/*border:2px solid red;*/bottom:0px;left:15%;display:flex;flex-direction:row;justify-content:space-around;

}#img-box #img-num li{display:inline-block;list-style:none;font-size:14px;color:#fff;text-align:center;line-height:40px;cursor:pointer;width:45px;height:40px;border-radius:50%;background-color:black;

}

这是HTML 和 CSS两部分。展示的效果是这样的:

下面的就是JS部分:

var n = 0;//设置定时器timer

var timer = setInterval(time, 4000);//轮播函数

//index 为 隐藏图片 ondex为显示的图片

functiontime() {

n++;if (n ==imgLeath) {

n= 0;

}for(var i=0; i

$("#img-box img").eq(i).fadeTo(0,0);

}

$("#img-box img").eq((n)).delay(50).fadeTo(500, 1);

}//设置点击切换效果 (右)

varrightteum;

$("#img-right").click(function() {for (var i = 0; i < imgLeath; i++)

{if ($("#img-box img").eq(i).css("opacity") != ‘0‘)

{//获取当前图片显示的下标

righteum =i;

}

}if(righteum == 5)

{

righteum= 5;

}

n=(righteum);

time();

});//设置点击切换效果 (左)

varlefteum;

$("#img-left").click(function() {for(var i=0; i

lefteum =i;

}

}if(lefteum == 0){

lefteum= 6;

}

n= (lefteum-2);

time();

});//当鼠标移入框内 轮播图停止

$("#img-box").mouseover(function(){

clearInterval(timer);

});//当鼠标移出框内 轮播图进行

$("#img-box").mouseout(function(){

timer= setInterval(time,4000);

});//点击li序号 图片就切换到那一张

for(var i=0; i

(function(i){

$("#img-num li").eq(i).click(function(){//i为切换图片的下标

console.log(i);//把 (i-1) 传给 n 因为在 time() 函数中 要进行 n++

n = (i-1);

time();

});

})(i)

}

})

我就来说说我写这个轮播图的想法和思路: