html jquery轮播图制作多个实例从易到难
点击领取淘宝京东拼多多唯品会优惠券
第一个:最基本的轮播,只有一张图片循环播
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>主页</title>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="__STATIC__/jquery-3.3.1.min.js"></script>
</head>
<style type="text/css">
/* 设定第一个盒子的宽高，让图片显示在这个盒子里面。
设定溢出时隐藏图片，因为有多个图片，每个图片都有一定的宽度，加起来就会溢出盒子。*/
.hezi{
overflow: hidden;
width: 400px;
height: 198px;
border:1px solid blue;
}
/* 设定第二个盒子的宽度为大于多张图片相加的宽度，因为li是左浮动，所有图片都在同一行*/
ul{
width: 2400px;
}
/* 设定li左浮动，让所有图片在同一行。*/
li{
width: 400px;
float: left;
height: 198px;
text-align: center;
}
img{
height: 100%;
}
</style>
<body>
<div class="layui-container">
<div class="hezi">
<ul>
<li><img src="https://pica.zhimg.com/80/v2-d16a7e3fc2fa98a2733f7488450c6cab_720w.webp?source=2c26e567"></li>
<li><img src="https://pica.zhimg.com/80/v2-3ec0b0c68ba898aa95e8f6afb4b37d62_720w.webp?source=2c26e567"></li>
<li><img src="https://picx.zhimg.com/80/v2-8083c196f67a3fa5584af0c8e25103c3_720w.webp?source=2c26e567"></li>
<li><img src="https://picx.zhimg.com/80/v2-cdf89aa63707556af034fcbf876285c2_720w.webp?source=2c26e567"></li>
<li><img src="https://picx.zhimg.com/80/v2-0b91777d045d3beb37f00e7eda2003c8_720w.webp?source=2c26e567"></li>
</ul>
</div>
</div>
<script type="text/javascript">
//获取图片个数
geshu=$("li").length;
//执行次数，执行一次加1,执行下一张图片的显示及其他图片的隐藏。
var doNum=0;
// 每2秒执行一次函数
myint=setInterval(function(){
$("li").eq(doNum).show().siblings().hide();
doNum+=1;
// 执行次数等于li个数时，使其归零，再从第一张图片开始显示。否则下次显示的是第6、7、8张图片，但我们一共就五张图片。
if(doNum==geshu){
doNum=0;
}
},2000);
</script>
</body>
</html>
第二个:鼠标悬停时的[取消/清除]定时执行函数
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>主页</title>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="__STATIC__/jquery-3.3.1.min.js"></script>
</head>
<style type="text/css">
/*设定第一个盒子的宽高，让图片显示在这个盒子里面。
设定溢出时隐藏图片，因为有多个图片，每个图片都有一定的宽度，加起来就会溢出盒子。*/
.hezi{
overflow: hidden;
width: 400px;
height: 198px;
border:1px solid blue;
}
/*设定第二个盒子的宽度为大于多张图片相加的宽度，因为li是左浮动，所有图片都在同一行*/
ul{
width: 2400px;
}
/*设定li左浮动，让所有图片在同一行。*/
li{
width: 400px;
float: left;
height: 198px;
text-align: center;
}
img{
height: 100%;
}
</style>
<body>
<div class="layui-container">
<div class="hezi">
<ul>
<li><img src="https://pica.zhimg.com/80/v2-d16a7e3fc2fa98a2733f7488450c6cab_720w.webp?source=2c26e567"></li>
<li><img src="https://pica.zhimg.com/80/v2-3ec0b0c68ba898aa95e8f6afb4b37d62_720w.webp?source=2c26e567"></li>
<li><img src="https://picx.zhimg.com/80/v2-8083c196f67a3fa5584af0c8e25103c3_720w.webp?source=2c26e567"></li>
<li><img src="https://picx.zhimg.com/80/v2-cdf89aa63707556af034fcbf876285c2_720w.webp?source=2c26e567"></li>
<li><img src="https://picx.zhimg.com/80/v2-0b91777d045d3beb37f00e7eda2003c8_720w.webp?source=2c26e567"></li>
</ul>
</div>
</div>
<script type="text/javascript">
//获取图片个数
geshu=$("li").length;
//执行次数，执行一次加1,执行下一张图片的显示及其他图片的隐藏。
var doNum=0;
// 每2秒执行一次函数
var myint=setInterval(picloop,2000);
function picloop(){
$("li").eq(doNum).show().siblings().hide();
doNum+=1;
// 执行次数等于li个数时，使其归零，再从第一张图片开始显示。否则下次显示的是第6、7、8张图片，但我们一共就五张图片。
if(doNum==geshu){
doNum=0;
}
}
// 当鼠标悬停图片上时，取消setInterval()函数设定的定时执行操作
$("li").mouseenter(function(){
$(this).css('cursor','pointer');
clearInterval(myint);
});
// 当鼠标离开图片上时，定时执行setInterval()函数设定的操作
$("li").mouseleave(function(){
myint=setInterval(picloop,2000);
});
</script>
</body>
</html>
第三个:
第四个:
第五个:
第六个: