页面展示图
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<link rel="icon" href="//www.jd.com/favicon.ico">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="c1">
<div class="c3">
<ul class="lbt">
<li class="i1"><img
src="//img12.360buyimg.com/babel/s590x470_jfs/t1/141047/21/22177/187743/6184d79aE26884a79/c87eef19caa91023.jpg.webp"
alt="" class=""></li>
<li class="i2"><img
src="//img14.360buyimg.com/pop/s590x470_jfs/t1/214532/12/2060/70920/6178b2fcE10944bdc/a9c90434eda2a97e.jpg.webp"
alt="" class="hide"></li>
<li class="i3"><img
src="//img30.360buyimg.com/pop/s590x470_jfs/t1/220092/16/2545/44461/617e33d7E31901352/e3bd37d3ffbe90f7.jpg.webp"
alt="" class="hide"></li>
<li class="i4"><img
src="//imgcps.jd.com/ling4/100014654958/54iG5qy-5aW954mp/5YWo5Zy65L2O6IezN-aKmA/p-5bd8253082acdd181d02fa28/d0bc4a5f/cr/s/q.jpg"
alt="" class="hide"></li>
<li class="i5"><img
src="//img13.360buyimg.com/pop/s590x470_jfs/t1/223168/33/355/76562/617a70f5E3fb49ea0/025df96c80360d02.jpg.webp"
alt="" class="hide"></li>
<li class="i6"><img
src="//img14.360buyimg.com/pop/s590x470_jfs/t1/219284/15/3105/58373/6183cbbeE44e46e89/d781541f3578cbf3.jpg.webp"
alt="" class="hide"></li>
</ul>
<ul class="button">
<li class="left_btn"><span> < </span></li>
<li class="right_btn"><span> > </span></li>
</ul>
<ul class="index">
<li><input type="radio" class="l1" name="nbsp" value="0" checked></li>
<li><input type="radio" class="l2" name="nbsp" value="1"></li>
<li><input type="radio" class="l3" name="nbsp" value="2"></li>
<li><input type="radio" class="l4" name="nbsp" value="3"></li>
<li><input type="radio" class="l5" name="nbsp" value="4"></li>
<li><input type="radio" class="l6" name="nbsp" value="5"></li>
</ul>
</div>
</div>
<script src="j1.js"></script>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
}
.img {
width: 590px;
height: 470px;
}
.c1 {
width: 590px;
height: 470px;
background-color: rgba(0, 0, 0, .15);
margin: 100px auto;
}
li {
list-style: none;
}
img {
cursor: pointer;
}
.c3 {
position: relative;
}
.c3 .lbt li {
position: absolute;
top: 0;
left: 0;
}
.c3 .button li {
position: absolute;
top: 217px;
width: 25px;
height: 35px;
background-color: rgba(0, 0, 0, .15);
text-align: center;
line-height: 35px;
cursor: pointer;
font-size: 20px;
}
.left_btn {
left: 0;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
}
.left_btn span {
margin-right: 4px;
}
.right_btn {
right: 0;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
}
.right_btn span {
margin-left: 4px;
}
.c3 .index li input {
position: absolute;
top: 430px;
}
.l1 {
left: 10px;
}
.l2 {
left: 25px;
}
.l3 {
left: 40px;
}
.l4 {
left: 55px;
}
.l5 {
left: 70px;
}
.l6 {
left: 85px;
}
.hide {
display: none;
}
js代码
// 自动轮播
function zdlb() {
$(".lbt li").each(function () {
if ($(this).children("img").attr("class") !== "hide") {
res = $(this).index();
// console.log(res);
}
});
if (res !== 5) {
// ***********************使用了fadeIn后，标签display属性为inline，所以要设置回none***********************
$(".lbt li").eq(res + 1).siblings().children("img").addClass("hide").css("display", "none");
$(".lbt li").eq(res + 1).children("img").fadeIn(1000).removeClass("hide");
$(".index li").eq(res + 1).children("input").prop("checked", true);
$(".index li").eq(res + 1).siblings().children().prop("checked", false);
} else {
$(".lbt li").eq(0).siblings().children("img").addClass("hide").css("display", "none");
$(".lbt li").eq(0).children("img").fadeIn(1000).removeClass("hide");
$(".index li").eq(0).children("input").prop("checked", true);
$(".index li").eq(0).siblings().children().prop("checked", false);
}
}
var ID;
function begin() {
if (ID === undefined) {
ID = setInterval(zdlb, 3000);
}
}
function end() {
clearInterval(ID);
ID = undefined;
}
begin();
// 鼠标悬浮事件
$(".c3").hover(mouseover, mouseout);
function mouseover() {
end();
$(".index li input").each(function () {
$(this).click(function () {
let index = $(this).val();
$(".lbt li").eq(index).siblings().children("img").addClass("hide").css("display", "none");
$(".lbt li").eq(index).children("img").fadeIn(1000).removeClass("hide");
})
})
}
function mouseout() {
begin();
}
// 右侧按钮
$(".right_btn").click(function () {
zdlb();
})
// 左侧按钮
$(".left_btn").click(function () {
$(".lbt li").each(function () {
if ($(this).children("img").attr("class") !== "hide") {
res = $(this).index();
}
});
if (res !== 0) {
// ***********************使用了fadeIn后，标签display属性为inline，所以要设置回none***********************
$(".lbt li").eq(res - 1).siblings().children("img").addClass("hide").css("display", "none");
$(".lbt li").eq(res - 1).children("img").fadeIn(1000).removeClass("hide");
$(".index li").eq(res - 1).children("input").prop("checked", true);
$(".index li").eq(res - 1).siblings().children().prop("checked", false);
} else {
$(".lbt li").eq(5).siblings().children("img").addClass("hide").css("display", "none");
$(".lbt li").eq(5).children("img").fadeIn(1000).removeClass("hide");
$(".index li").eq(5).children("input").prop("checked", true);
$(".index li").eq(5).siblings().children().prop("checked", false);
}
})
Readme
自动轮播：
标签初始化，img标签除了第一个没有hide属性外，其余五个都有hide属性；
先定义一个zdlb函数，找到没有hide属性的img标签的index值；
然后让其下一个img标签的其余五个img标签加上hide属性，再把这个img标签加上fadeIn属性，并移除hide属性；
做一个索引判断，当到了最后一个标签时，索引初始化为为0；
左下侧小圆点是用input标签实现，根据图片索引的不同，input标签索引也随之变动，且变动后设置默认选中；
即：checked，这样就能实现图片的自动轮播且小圆点也跟着变化；
定义一个定时器，3秒执行一次zdlb函数；
当鼠标放置于轮播图内时，取消定时器；
当鼠标放置于轮播图外时，继续执行定时器；
右侧按钮：
其执行思路与zdlb函数一致
左侧按钮：
与zdlb函数相似，只不过把判断的索引及初始化值等修改一下即可；
左下侧小圆点点击：
因为点击次按钮也属于鼠标悬浮事件，即悬浮到轮播图内，所以点击事件直接在取消自动轮播函数内实现即可；
拿到input框点击后的value，然后根据value，根据轮播图index将对应图片显示，其它图片隐藏；