效果图：
功能：
1、点击左右箭头，切换图片，并且下面小圆点跟着一起变
2、点击小圆点切换图片
3、轮播图自动切换
4、鼠标悬停时，轮番图自动切换停止，鼠标移出时，轮播图自动切换继续
JQuery的下载：
1）官网地址：https://jquery.com/
2）各个版本的下载：https://code.jquery.com/
实现代码：
js代码：
<script src="../js/jquery-3.7.0.min.js"></script>
<script>
let imgArr = ["images/banner01.png","images/banner02.png","images/banner03.png","images/banner04.png","images/banner05.png"];
$(function(){
$.each(imgArr,function(index,item){
//根据图片的个数创建小li，然后添加到装轮番图的标签中
let li = $("<li><a href=''><img src=../"+item+"></a></li>")
$(".rotation_chart ul").append(li);
//创建相对应的小圆点
let span = $("<span></span>")
$(".swiper").append(span);
})
let index = 0;
// 默认显示第一张图片，以下注释代码用css样式第一个li，display:block控制，其余的小li设置none，防止出现刚开始最后一张闪现问题
// $(".rotation_chart ul li").eq(index).fadeIn().siblings().stop().fadeOut();
// 默认第一个小圆点
$(".swiper span").eq(index).addClass("current");
//给左右箭头绑定点击事件
$(".rotation_chart .arrow_left").click(function(){
isRightClick(false);
})
$(".rotation_chart .arrow_right").click(isRightClick)
//给小圆点绑定点击事件
$(".swiper").on("click","span",function(){
//因为向右点击会在原来的index+1,而点击小圆点是显示当前点击的，而不是点击的下一张
index = $(this).index() - 1;
isRightClick()
})
//如果参数1为false，则是左点击
function isRightClick(bool=true){
//先清除定时器，防止切换后快速的就自动切换到下一张
clearInterval(timer)
if(bool){
index = index == imgArr.length-1?0:index+1;
}else{
index = index == 0? imgArr.length-1:index-1;
}
$(".rotation_chart ul li").eq(index).stop().fadeIn().siblings().stop().fadeOut();
//此时改变对应的小圆点小圆点
$(".swiper span").eq(index).addClass("current").siblings().removeClass('current');
//重新打开定时器
timer = setInterval(function(){
$(".rotation_chart .arrow_right").click();
},3000);
}
//给轮番图添加自动播放功能
let timer = setInterval(function(){
$(".rotation_chart .arrow_right").click();
},3000)
//给每一个li绑定hover事件，
$(".rotation_chart>ul").on("mouseenter","li",function(){
clearInterval(timer);
});
$(".rotation_chart>ul").on("mouseleave","li",function(){
timer = setInterval(function(){
$(".rotation_chart .arrow_right").click();
},3000);
});
})
</script>html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="../css/base.css"> -->
<link rel="stylesheet" href="../css/homework.css">
</head>
<body>
<div id="app">
<div class="promote typePage">
<!-- <div ></div> -->
<div class="sidebar">
<ul>
<li>
<span class="item_txt">手机</span>
<div class="list">list1</div>
</li>
<li>
<span class="item_txt">电视</span>
<div class="list">list2</div>
</li>
<li>
<span class="item_txt">家电</span>
<div class="list">list3</div>
</li>
<li>
<span class="item_txt">笔记本 平板</span>
<div class="list">list4</div>
</li>
<li>
<span class="item_txt">出行 穿戴</span>
<div class="list">list5</div>
</li>
<li>
<span class="item_txt">耳机 音箱</span>
<div class="list">list6</div>
</li>
<li>
<span class="item_txt">健康 儿童</span>
<div class="list">list7</div>
</li>
<li>
<span class="item_txt">生活 箱包</span>
<div class="list">list8</div>
</li>
<li>
<span class="item_txt">智能 路由器</span>
<div class="list">list9</div>
</li>
<li>
<span class="item_txt">电源 配件</span>
<div class="list">list10</div>
</li>
</ul>
</div>
<div class="rotation_chart">
<ul>
</ul>
<span class="arrow_left"></span>
<span class="arrow_right"></span>
<div class="swiper">
</div>
</div>
</div>
</div>
</body>
</html>css样式：
前面@font-face{}的内容是 使用字体图标的准备工作，这里使用的国外的
字体图标下载
https://www.iconfont.cn/（国内），https://icomoon.io/（国外）
@font-face{
font-family:'icomoon';
src:url('../fonts/icomoon.eot?7kkyc2');
src:url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight:normal;
font-style:normal;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
input{
outline: none;
border: 0;
}
/* 版心 */
.typePage{
width: 1240px;
margin: 0 auto;
}
/* ----------------------- promote模块 */
.promote {
margin-top: 30px;
position: relative;
height: 460px;
/* overflow: hidden; */
}
.promote .sidebar{
/* display: inline-block; */
position: absolute;
width: 240px;
height: 100%;
padding: 20px 0;
background-color: rgba(127, 124, 118, 0.63);
z-index: 1;
}
.promote .sidebar li .item_txt{
position: relative;
display: block;
line-height: 42px;
padding-left: 25px;
color: #fff;
cursor: pointer;
}
.promote .sidebar li .list{
display: none;
position: absolute;
top: 0;
left: 240px;
width: 300px;
height: 460px;
/* filter: drop-shadow(0px 5px 3px #ccc); */
box-shadow: 5px 5px 30px rgba(199, 198, 198, 0.463) ;
color: #333;
background-color: rgb(255, 254, 254);
z-index: 100;
}
.promote .sidebar li .item_txt::after{
content: "\f105";
position: absolute;
right: 20px;
font-family: 'icomoon';
font-size: 20px;
}
.promote .sidebar li:hover{
background-color: rgba(255, 94, 0, 0.816);
}
.promote .sidebar li:hover .list{
display: block;
}
.promote .rotation_chart ul,
.promote .rotation_chart{
height: 100%;
}
.promote .rotation_chart li{
position: absolute;
display: none;
top: 0;
left: 0;
height: 100%;
z-index: 0;
}
.promote .rotation_chart li:first-child{
display: block;
}
.promote .rotation_chart li img{
width: 1240px;
height: 460px;
/* vertical-align: middle; */
}
.promote .rotation_chart li a{
display: block;
}
.promote .rotation_chart .arrow_left,
.promote .rotation_chart .arrow_right
{
position: absolute;
display: inline-block;
top: 50%;
transform: translateY(-50%);
padding: 10px;
font-size: 48px;
font-family: 'icomoon';
color: rgb(162, 161, 161);
cursor: pointer;
}
.promote .rotation_chart .arrow_left:hover,
.promote .rotation_chart .arrow_right:hover{
background-color: rgb(135, 135, 135);
color: #fff;
}
.promote .rotation_chart .arrow_left{
left: 240px;
}
.promote .rotation_chart .arrow_right{
right: 0;
}
.promote .rotation_chart .swiper{
position: absolute;
bottom: 30px;
right: 30px;
/* background-color: red; */
}
.promote .rotation_chart .swiper span{
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid rgb(184, 184, 184);
border-radius: 5px;
margin:0 4px;
background-color: rgb(143, 145, 144);
cursor: pointer;
}
.promote .rotation_chart .swiper span:hover,
.promote .rotation_chart .swiper .current
{
background-color: transparent;
border-color: rgb(143, 145, 144);
}
