一、通过display:none和display:block实现轮播图
1、样式解释
display:none 标签和组件及其内容不显示
display:block 标签和组件及其内容显示
2、应用代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style>
.Carousel_Content{
width: 748px;
height: 260px;
margin: 0 auto;
/*border-width: 1px;*/
/*border-style:solid;*/
/*border-color:red;*/
position: relative;
}
.Carousel_img{
width: 748px;
height: 260px;
display: none;
cursor:pointer ;/* 手指*/
position: absolute;
}
.Carousel_ul{
width: 100px;
height: 20px;
margin: 0px;
padding: 0px;
bottom: 55px;
list-style-type: circle;
position: absolute; /*相对于position: relative（父类）的绝对定位*/
top:225px;
left: 645px;
}
.Carousel_li{
float: left;
margin-left: 25px;
color: white;
cursor:pointer ; /*手指*/
}
.Carousel_arrow{
position: absolute;
width: 40px;
height: 70px;
top:90px;
font-size: 50px;
color: #3c3c3c;
cursor:pointer; /*手指*/
}
#right_arrow{
right: 0px;
}
</style>
</head>
<body>
<div class="Carousel_Content" id="Content">
<img class="Carousel_img" src="https://yue08.sogoucdn.com/cdn/web/image/2021/10/29/20211029164409_5857.jpg" alt="" style="display: block;">
<img class="Carousel_img" src="https://yue04.sogoucdn.com/cdn/web/image/2021/10/29/20211029164437_5858.jpg" alt="" >
<img class="Carousel_img" src="https://yue05.sogoucdn.com/cdn/web/image/2021/10/29/20211029164502_5859.jpg" alt="">
<img class="Carousel_img" src="https://yue06.sogoucdn.com/cdn/web/image/2021/10/26/20211026171342_5842.jpg" alt="">
<ul class="Carousel_ul" >
<li class="Carousel_li" style="color:black;" onclick="li0()"></li>
<li class="Carousel_li" onclick="li1()"></li>
<li class="Carousel_li" onclick="li2()"></li>
<li class="Carousel_li" onclick="li3()"></li>
</ul>
<div class="Carousel_arrow" id="left_arrow" onclick="arrow(1)" onselectstart="return false">
<
</div>
<div class="Carousel_arrow" id="right_arrow" onclick="arrow(0)" onselectstart="return false">
>
</div>
</div>
<script>
//轮播图
var imgs=document.getElementById("Content").getElementsByClassName("Carousel_img")
var lis=document.getElementById("Content").getElementsByClassName("Carousel_li")
var index=0;
function arrow(x){
//右
if(x==0){
//联系左右点击防止block冲突
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
//除去变化中的black格式
for(var j=0;j<lis.length;j++){
lis[j].style.color="white";
}
index++;
if(index==imgs.length){
index=0;
}
imgs[index].style.display="block";
lis[index].style.color="black";
}
//左
if(x==1){
//联系左右点击防止block冲突
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
//去变化中的black格式
for(var j=0;j<lis.length;j++){
lis[j].style.color="white";
}
index--;
if (index<0){
index=imgs.length-1;
}
imgs[index].style.display="block";
lis[index].style.color="black";
}
}
//过渡函数
function hello(name){
return function(){
arrow(0);
}
}
//函数执行定时器，有参数必须有返回值（使用过渡函数）
setInterval(hello(name),5000);
//点击li圈圈显示相应图片
function li0(){
//防止block冲突
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
//除去原有的black格式
for(var j=0;j<lis.length;j++){
lis[j].style.color="white";
}
imgs[0].style.display="block";
lis[0].style.color="black";
}
//点击li圈圈显示相应图片
function li1(){
//防止block冲突
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
//除去原有的black格式
for(var j=0;j<lis.length;j++){
lis[j].style.color="white";
}
imgs[1].style.display="block";
lis[1].style.color="black";
}
//点击li圈圈显示相应图片
function li2(){
//防止block冲突
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
//除去原有的black格式
for(var j=0;j<lis.length;j++){
lis[j].style.color="white";
}
imgs[2].style.display="block";
lis[2].style.color="black";
}
//点击li圈圈显示相应图片
function li3(){
//防止block冲突
for(var i=0;i<imgs.length;i++){
imgs[i].style.display="none";
}
//除去原有的black格式
for(var j=0;j<lis.length;j++){
lis[j].style.color="white";
}
imgs[3].style.display="block";
lis[3].style.color="black";
}
</script>
</body>
</html>