我们在开发当中经常用到轮播。我在这里总结了一下几种,仅供参考:

第一种:

  1、jQuery:用display :none/block控制的一种轮播;

// CSS部分
#igs {
margin: 30px auto;
width: 1200px;
height: 460px;
position: relative;
} .ig {
position: absolute;
} #tabs {
position: absolute;
list-style: none;
background-color: rgba(255,255,255,.5);
left: 500px;
bottom: 10px;
border-radius: 10px;
padding: 5px 0 5px 5px;
} .tab{
float: left;
text-align: center;
line-height: 20px;
width: 20px;
height: 20px;
cursor: pointer;
overflow: hidden;
margin-right: 4px;
border-radius: 100%;
background-color: rgb(200,100,150);
} .tab.active{
background-color: red;
color: #fff;
} .btn{
position: absolute;
top: 200px;
width: 40px;
color: #fff;
height: 100px;
background-color: rgba(255,255,255,.3);
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 100px;
border-radius: 5px;
margin: 0 5px;
} .btn2{
position: absolute;
right: 0px;
} .btn:hover{
background-color: rgba(0,0,0,.7);
} // HTML部分
<div id="igs">
<a class="ig" href="#">1<img src="data:images/slider-1.jpg"/></a>
<a class="ig" href="#">2<img src="data:images/slider-2.jpg"/></a>
<a class="ig" href="#">3<img src="data:images/slider-3.jpg"/></a>
<a class="ig" href="#">4<img src="data:images/slider-4.jpg"/></a>
<a class="ig" href="#">5<img src="data:images/slider-5.jpg"/></a>
<div class="btn btn1"><</div>
<div class="btn btn2">></div>
<ul id="tabs">
<li class="tab active">1</li>
<li class="tab">2</li>
<li class="tab">3</li>
<li class="tab">4</li>
<li class="tab">5</li>
</ul>
</div> // JavaScript部分
//定义全局变量和定时器
var i = 0 ;
var timer; $(function(){
//用jquery方法设置第一张图片显示,其余隐藏
           // $("#igs a:not(:first-child)").hide();这样操作的话可以把a链接里面的class取消掉
$('.ig').eq(0).show().siblings('.ig').hide(); //调用showTime()函数(轮播函数)
showTime(); //当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
$('.tab').hover(function(){
//首先清除时间函数
clearInterval(timer);
//获取当前i的值,调用轮播函数
i = $(this).index();
Show();
},function(){
//鼠标离开时开启时间函数
showTime();
}); //鼠标点击左侧的箭头
$('.btn1').click(function(){
clearInterval(timer);
            i--;
if(i == 0){
//注意此时i的值
i = $('.ig').length;
}
Show();
showTime();
}); //鼠标点击右侧的箭头
$('.btn2').click(function(){
clearInterval(timer);
            i++;
if(i == $('.ig').length - 1){
//当图片是最后一张时,点击右箭头,
i = -1;
}
Show();
showTime();
});
}); //创建一个showTime函数
function showTime(){
//设置定时器
timer = setInterval(function(){
//调用一个Show()函数
Show();
i++;
//当图片是最后一张的后面时,设置图片为第一张
if(i == 5){
i = 0;
}
},2000);
} //创建一个Show函数
function Show(){
//在这里可以用其他jquery的动画
$('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300); //给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式
$('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
}

  2、Javascript:用display :none/block控制的一种轮播;

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container{
width:1130px;
height:500px;
margin:0 auto;
position:relative;
}
.inner{
width:1130px;
height:500px;
}
.inner-img{
width:1130px;
height:500px;
display: none;
position:absolute;
top:0;
left:0;
z-index:1;
}
.inner-img.active{
display: block;
}
.leftBtn,.rightBtn{
position:absolute;
width:40px;
height:60px;
background:rgba(0,0,0,0.3);
font-size: 30px;
color:#fff;
text-align: center;
line-height: 60px;
cursor:pointer;
z-index: 11;
display:none;
}
.leftBtn{
left:5px;
top:200px;
}
.rightBtn{
right:5px;
top:200px;
}
.container ul{
position:absolute;
left:520px;
bottom:10px;
z-index: 11;
list-style: none;
width:100px;
height:20px;
}
.container ul .page{
float:left;
width:18px;
height:18px;
border-radius:18px;
background: black;
margin-right: 6px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.container ul .page.active{
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
<a href="#" class="inner-img active"><img src="data:images/TB1.Ez0IVXXXXcbXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a>
<a href="#" class="inner-img"><img src="data:images/TB1dpJtJFXXXXXsXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a>
<a href="#" class="inner-img"><img src="data:images/TB14aRbJFXXXXagXVXXXXXXXXXX-1130-500.jpg_q100.jpg" alt=""></a>
<a href="#" class="inner-img"><img src="data:images/TB15AHZIVXXXXX7XFXXSutbFXXX.jpg_q100.jpg" alt=""></a>
</div>
<div class="leftBtn">&lt;</div>
<div class="rightBtn">&gt;</div>
<ul>
<li class="page active">1</li>
<li class="page">2</li>
<li class="page">3</li>
<li class="page">4</li>
</ul>
</div>
<script>
var container = document.getElementsByClassName('container')[0],
// 获取所有包含图片的链接
innerImg = document.getElementsByClassName('inner-img'),
// 获取左右按钮
btnL = document.getElementsByClassName('leftBtn')[0],
btnR = document.getElementsByClassName('rightBtn')[0],
// 获取分页器
page = document.getElementsByClassName('page'),
// 声明变量
num = 0;
// 声明时间控制函数
var timer = setInterval(moveR, 1000);
// 图片向右轮播
function moveR() {
// 变量每1000毫秒递增一次,图片向右轮播
num++;
// 如果是最后一张图片的时候从0开始显示
if (num == innerImg.length) {
num = 0;
}
move();
}; // 图片向左轮播
function moveL() {
// 每调用一次moveL(),变量递减一次
num--;
// 如果是第一张图片,则从最后一张图片开始显示
if (num == -1) {
num = innerImg.length - 1;
};
move();
}
  
   // 图片切换
   function move(){
     // 把所有的innerImg隐藏和page背景全部变成黑色
for (var i = 0; i < innerImg.length; i++) {
innerImg[i].style.display = 'none';
page[i].style.background = 'black';
}
// 把当前num下标的innerImg显示和page背景变成red
innerImg[num].style.display = 'block';
page[num].style.background = 'red';
   }
// 分页器鼠标滑过时图片切换
for (var i = 0; i < page.length; i++) {
// 用来保存下标,page[i].index == 0 / 1 / 2 / 3
page[i].index = i;
// console.log(page[i].index);
// 因为已经保存好的下边,这里的page[i], page[0], page[1], page[2], page[3]
page[i].onmouseover = function() {
for (var j = 0; j < page.length; j++) {
page[j].style.background = 'black';
innerImg[j].style.display = 'none';
}
this.style.background = 'red';
       // console.log(this.index);可以查看是多少
innerImg[this.index].style.display = 'block';
num = this.index;
}
}
btnL.onclick = function() {
moveR();
}
btnR.onclick = function() {
moveL();
} // 鼠标划上container时让左右按钮显示
container.onmouseover = function() {
// 清除时间函数
clearInterval(timer);
btnR.style.display = 'block';
btnL.style.display = 'block';
} // 鼠标离开container时让左右按钮隐藏
container.onmouseout = function() {
// 开启时间函数
timer = setInterval(moveR, 3000);
btnR.style.display = 'none';
btnL.style.display = 'none';
}
</script>
</body>
</html>

第二种:

  1、用jQuery实现的跑马灯效果;

  HTML:

    <div class="container">
<div class="inner-img">
<div class="img"><img src="img/1.jpg" height="100%" width="100%" alt="" /></div>
<div class="img"><img src="img/2.jpg" height="100%" width="100%" alt="" /></div>
<div class="img"><img src="img/3.jpg" height="100%" width="100%" alt="" /></div>
<div class="img"><img src="img/4.jpg" height="100%" width="100%" alt="" /></div>
<div class="img"><img src="img/5.jpg" height="100%" width="100%" alt="" /></div>
<div class="img"><img src="img/6.jpg" height="100%" width="100%" alt="" /></div>
</div>
<div class="btn-left">&lt;</div>
<div class="btn-right">&gt;</div>
</div>

  CSS:

.container{
width: 1000px;
height: 300px;
border: 1px solid #666;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.inner-img{
/*如果显示是五张图片,这里必须要等于 + 一张图片的width*/
width: 1200px;
height: 300px;
background-color: #ccc;
position: absolute;
left:;
top:;
}
.img{
width: 200px;
height: 100%;
float: left;
font-size: 50px;
text-align: center;
line-height: 300px;
padding: 20px;
box-sizing: border-box;
/*overflow: hidden;*/
}
.btn-left,.btn-right{
width: 30px;
height: 60px;
color: #fff;
background: #000;
font-size: 30px;
text-align: center;
line-height: 60px;
opacity: 0.5;
display: none;
}
.btn-left{
position:absolute;
left: 0px;
top: 120px;
}
.btn-right{
position:absolute;
right: 0px;
top: 120px;
}

  JavaScript:

// 可以把整个代码封装成一个函数,后期可以传参,用来控制一次可以切换几张图片
$(document).ready(function() {
// 获取包含图片的盒子的宽度
var imgW = $(".img").outerWidth();
// 指定计时器
var t = setInterval(moveL, 2000); function moveL() {
/*
*.stop():停止当前正在运行的动画,表示两个参数都是false;
*.stop(true,true):停止被选元素的所有加入队列的动画,但允许完成当前动画。
*/
$(".inner-img").stop(true, true);
/*
*1、首先将inner-img的left: 0转换为left:-200px
*2、将inner-img的第一个子元素appendTo()到inner-img里面
*3、再次设置inner-img的left:-200px;
*/
$(".inner-img").animate({
left: -imgW
}, function() {
// 讲已经切换到-200px的第一张图片appendTo到父元素里面,这也是跑马灯效果的秘诀
$(".inner-img > .img").first().appendTo($(".inner-img"));
$(".inner-img").css({
left: 0
});
})
};
// 向右的轮播
function moveR() {
$(".inner-img").stop(true, true);
$(".inner-img").css({
left: -imgW
});
$(".inner-img > .img").last().prependTo($(".inner-img"));
$(".inner-img").animate({
left: 0
});
};
// 鼠标滑上,滑下效果
$(".container").hover(function() {
// 当鼠标滑过父容器时清除时间函数
clearInterval(t);
// 并且将左右按钮显示出来
$(".btn-left").add(".btn-right").fadeIn(50);
}, function() {
// 当鼠标滑过父容器时开启时间函数
t = setInterval(moveL, 2000);
// 并且将左右按钮隐藏
$(".btn-left").add(".btn-right").fadeOut(50);
});
// 点击左边的按钮向右切换图片
$(".btn-left").click(function() {
moveR();
});
// 点击右边的按钮向左切换图片
$(".btn-right").click(function() {
moveL();
})
});

  2、用JavaScript实现的跑马灯效果;

第三种:

  1、用jQuery实现的无缝轮播

  HTML:

        <div class="banner">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt="" /></a></li>
<li><a href=""><img src="img/2.jpg" alt="" /></a></li>
<li><a href=""><img src="img/3.jpg" alt="" /></a></li>
<li><a href=""><img src="img/4.jpg" alt="" /></a></li>
<li><a href=""><img src="img/5.jpg" alt="" /></a></li>
</ul>
<ul class="page"></ul>
<div class="btn btn_l">&lt;</div>
<div class="btn btn_r">&gt;</div>
</div>

  CSS:  

* {
padding: 0px;
margin: 0px;
list-style: none;
font-family: "微软雅黑";
} .banner {
width: 740px;
height: 350px;
margin: 100px auto;
border: 1px solid #808080;
position: relative;
overflow: hidden;
} .banner .img {
width: 5000px;
position: absolute;
left: 0px;
top: 0px;
} .banner .img li {
width: 740px;
height: 350px;
} .banner .img li a {
display: block;
width: 100%;
height: 100%;
} .banner .img li {
float: left;
} .banner .page {
position: absolute;
width: 100%;
bottom: 10px;
left: 0px;
text-align: center;
font-size: 0px;
} .banner .page li {
width: 20px;
height: 20px;
background-color: #888;
border-radius: 50%;
display: inline-block;
margin: 0px 3px;
cursor: pointer;
color: #fff;
} .banner .page li.active {
background-color: #ff6a00;
} .banner .btn {
width: 30px;
height: 50px;
background-color: #808080;
opacity: 0.5;
filter: alpha(opacity:0.5);
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
text-align: center;
line-height: 50px;
font-size: 40px;
color: #fff;
display: none;
} .banner .btn_l {
left: 0px;
} .banner .btn_r {
right: 0px;
} .banner:hover .btn {
display: block;
}

  JavaScript:

            $(function() {
//声明当前图片的索引值
var num = 0;
//克隆第一张图片
var clone = $('.img li').first().clone();
//获取图片的宽度
var imgW = $('.img li').first().width();
//将第一张图片插入到img容器里面里面
$('.banner .img').append(clone);
//获取插入之后li的个数
var size = $('.img li').size();
//动态的根据图片数量创建分页器并且插入到num里面
for(var i = 0; i < size - 1; i++) {
$('.page').append('<li></li>');
}
//给创建的分页器的第一个添加active的类
$('.page li').first().addClass('active');
//创建一个时间函数用来控制图片切换的方式
var timer = setInterval(function() {
num++;
move();
}, 1000); //move函数
function move() {
if(num == size) {
//当运动到最后一张图片时,重置整个img到left:0的位置
$('.banner .img').css({
left: 0
});
num = 1;
} //点击右边按钮时
if(num == -1) {
$('.img').css({
left: -(size - 1) * imgW
})
num = size - 2;
} //随着num的递增,img容器以animate的方式向左移动-imgW * num的距离
$('.banner .img').stop().animate({
left: -imgW * num
}, 500); //当num等于图片数量时,选取第一个分页器设置样式,否则,等于当前按照num设置分页器的样式。
if(num == size - 1) {
$('.page li').eq(0).addClass('active').siblings().removeClass('active');
} else {
$('.page li').eq(num).addClass('active').siblings().removeClass('active');
}
}; //点击分页器
$('.page li').click(function(){
//获取到当前分页器的下标并且赋值给当前图片的下标
num = $(this).index();
move();
}) //点击右按钮时向右切换图片
$('.btn_r').click(function() {
num--;
move();
}) //点击左边按钮时切换图片
$('.btn_l').click(function() {
num++;
move();
}) //鼠标滑过banner容器时
$('.banner').hover(function() {
//首先清除时间函数
clearInterval(timer);
}, function() {
//鼠标离开时调用时间函数
timer = setInterval(function() {
num++;
move();
}, 1000)
})
})

  2、用js实现的无缝轮播

  HTML:

        <div class="win">
<a href="javascript:;"><img src="img/1.jpg" title=""></a>
<a href="javascript:;"><img src="img/2.jpg" title=""></a>
<a href="javascript:;"><img src="img/3.jpg" title=""></a>
<a href="javascript:;"><img src="img/4.jpg" title=""></a>
<a href="javascript:;"><img src="img/5.jpg" title=""></a>
<div class="btn">
<div class="btnL">&lt;</div>
<div class="btnR">&gt;</div>
</div>
<ul class="circle">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

  css:

.win{
height: 350px;
width: 740px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.win a{
position: absolute;
top:;
left:;
}
.btn{
width: 740px;
height: 70px;
font-size: 30px;
line-height: 70px;
text-align: center;
position: absolute;
left:;
top: 50%;
margin-top: -35px;
}
.btn .btnL, .btn .btnR{
width: 35px;
height: 70px;
font-size: 30px;
line-height: 70px;
text-align: center;
color: #fff;
float: left;
background: black;
opacity: 0.5;
filter:alpha(opacity:50);
cursor: pointer;
}
.btn .btnL{
float: left;
}
.btn .btnR{
float: right;
}
.circle{
height: 15px;
width: 90px;
margin-left: 5px;
float: left;
position: absolute;
left: 50%;
margin-left: -33px;
bottom: 10px;
z-index:;
}
.circle li{
height: 15px;
width: 15px;
background: #ccc;
opacity: 0.5;
filter:aplha(opacity:50);
border-radius: 50%;
margin-left: 3px;
float: left;
}
.circle li.active{
background: #e40077;
}

  JavaScript:

        <script type="text/javascript">
window.onload = function(){
// 最大的容器
var win = document.getElementsByClassName('win')[0];
// 包含图片的a链接
var as = win.getElementsByTagName('a');
// 分页器
var lis = document.getElementsByClassName('circle')[0].getElementsByTagName('li');
//获取图片的尺寸
var widths = parseInt(as[0].clientWidth);
// 左右的按钮
var btnL = win.getElementsByClassName('btnL')[0];
var btnR = win.getElementsByClassName('btnR')[0];
//定义双下标
var num = 0;
var next = 0;
// 设定开关,如果当前动画没有完成,则停止操作到当前动画完成
var flag = true; // 首先初始化所有图片的位置,但是将第一张图片就位到left:0的位置
for (var i = 0; i < as.length; i++) {
// 跳过本次循环
if (i == 0) {
continue;
};
as[i].style.left = widths + 'px';
}; // 设定时间函数,每隔两秒动画一次
var timer = setInterval(moveL, 2000); // 向左切换的函数
function moveL(){
next++;
// 如果是最后一张图片,从第一张图片开始
if(next == as.length){
next = 0;
}
// 让下一张图片到右边就为准备
as[next].style.left = widths + 'px';
// 将当前分页器的样式取消,加给下一张图片
lis[num].className = '';
lis[next].className = 'active';
//动画:让当前的图片到左边去
animate(as[num], {
left: -widths
});
// //动画:下一张图片放到当前的位置
animate(as[next], {
left: 0
}, function(){
flag = true;
})
// 更新下标
num = next;
} // 想左切换的函数
function moveR(){
next--;
// 如果是第一张图片,从最后一张图片开始。
if(next == -1){
next = as.length - 1;
}
// 让下一张图片到左边定位边就为准备
as[next].style.left = -widths + 'px';
lis[num].className = '';
lis[next].className = 'active';
// 动画:让当前的图片到右边去
animate(as[num], {
left: widths
})
// 动画:让下一张图片到当前的位置
animate(as[next], {
left: 0
}, function(){
flag = true;
});
// 更新下标
num = next;
} // 分页器切换图片
for (var i = 0; i < lis.length; i++) {
// 保存下标lis[i].index == i,方便后期给每个lis添加点击事件
lis[i].index = i;
// 给每个lis添加点击事件
lis[i].onclick = function(){
for(var j = 0; j < lis.length; j++){
// 如果点击的是当前一张图片,即num == this.index;不能切换图片
if (num == this.index) {
return;
};
// 让当前的下标的图片就位到右边
as[this.index].style.left = widths + 'px';
lis[num].className = '';
lis[this.index].className = 'active';
// 将当前的一张移动到left:-width的位置
animate(as[num], {
left: -widths
});
// 将符合下标的一张图片移动到left:0的位置
animate(as[this.index], {
left: 0
})
// 更新下标
num = this.index;
}
}
}; // 点击右边向想左移动
btnR.onclick = function(){
if (flag) {
flag = false;
moveL();
}
} // 点击左边向想左移动
btnL.onclick = function(){
if (flag) {
flag = false;
moveR();
}
} // 鼠标滑过win时清除时间函数
win.onmouseover = function() {
clearInterval(timer);
}; // 鼠标离开win时开启时间函数
win.onmouseout = function() {
timer = setInterval(moveL, 2000);
};
}
</script>

 

web的几种轮播的更多相关文章

  1. 调用MyFocus库,简单实现二十几种轮播效果

    一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...

  2. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  3. OC可点击的两种轮播图效果

    基本上,每一个APP都有一个轮播图的效果展示,一般都是用来展示图片的一些信息,然后可以点击查看或购买,所以在此我将这种轮播图进行了一个类的封装,效果包含两种形式:第一种,来回轮转样式,第二种,一个方向 ...

  4. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  5. Web前端JS实现轮播图原理

    实现轮播图有很多方式,但是html的结构都是一样的.本文使用了Jquery框架,Dom操作更加方便灵活 html部分: <div class="banner"> < ...

  6. Javascript轮播 支持平滑和渐隐两种效果(可以只有两张图)

    先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思路: 一.先来看简单的,移动的,先上来一个图----移动效果图: 说明: ...

  7. Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图)

    原文:Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图) 先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思 ...

  8. Javascript轮播 支持平滑和渐隐两种效果

    Javascript轮播 支持平滑和渐隐两种效果 先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思路: 一.先来看简单的 ...

  9. 一分钟搞定AlloyTouch图片轮播组件

    轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至 ...

随机推荐

  1. Dubbo 服务集群容错配置

    Dubbo集群容错是靠配置cluster属性来做 支持改属性的标签为<dubbo:service>,<dubbo:referece>,<dubbo:consumer> ...

  2. Multidex(二)之Dex预加载优化

    Multidex(二)之Dex预加载优化 https://www.jianshu.com/p/2891599511ff

  3. 【Android】性能优化的一些方法

    1.采用硬件加速,在androidmanifest.xml中application添加  android:hardwareAccelerated="true".不过这个需要在and ...

  4. WPF中datagrid不显示滚动条问题

    WPF中DataGrid是自带滚动条的,当内容显示不下时可以使用滚动条显示.但是,开发中遇到了DataGrid一直不显示滚动条.之前也曾遇到过同类问题,再次经过查找,发现是StackPanel的原因, ...

  5. 用ArcMap打开MXD文件报One or more layers failed to draw错误!

    错误信息: One or more layers failed to draw: FDO error: 0General function failure [PW_X]参数不足,期待是 1. 原因: ...

  6. mysql中trim()函数的用法

    去除左空格函数: LTRIM(str) mysql> SELECT LTRIM(' barbar'); -> 'barbar' 去除右空格函数: RTRIM(str) mysql> ...

  7. mongo 分片

    // use ebay // sh.enableSharding("ebay") // db.getCollection("ebay_total_menu_detail_ ...

  8. jsonp突破浏览器同源策略

    jsonp突破浏览器同源策略 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. JS的异步世界

    前言 JS的异步由来已久,各种异步概念也早早堆在开发者面前.可现实代码中,仍然充斥了各种因异步顺序处理不当的bug,或因不好好思考,或因不了解真相.今天,就特来再次好好探索一番JS的异步世界. 01 ...

  10. HashMap 源码阅读

    前言 之前读过一些类的源码,近来发现都忘了,再读一遍整理记录一下.这次读的是 JDK 11 的代码,贴上来的源码会去掉大部分的注释, 也会加上一些自己的理解. Map 接口 这里提一下 Map 接口与 ...