7-24：HTML学习#15_index = pointindex-CSDN博客

本文链接：https://blog.csdn.net/weixin_70738298/article/details/125965736

本文详细介绍了使用JavaScript实现一个简单的轮播图的过程，包括HTML结构、CSS样式以及JavaScript交互逻辑。通过设置定时器实现自动切换，并添加了左右箭头控制手动切换。同时，还为轮播图的每个小点添加了点击事件，使得用户可以通过点击小点直接跳转到对应的图片。整个学习过程耗时6小时。

摘要由CSDN通过智能技术生成

今日学习：浅入浅出式轮播图，js。学习时长：6h。

 <header>
        <div class="box1">
        <div class="box2" id="box2">
          <ul class="list">
          <li class="item active"></li>
          <li class="item"></li>
          <li class="item"></li>
          <li class="item"></li>
          <li class="item"></li>
        </ul>
        <ul class="pointlist">
          <li class="point active" data-index="0"></li>
          <li class="point" data-index="1"></li>
          <li class="point" data-index="2"></li>
          <li class="point" data-index="3"></li>
          <li class="point" data-index="4"></li>
        </ul>
          <div class="box1-button" id="left">&lt;</div>
          <div class="box1-button" id="right">&gt;</div>
        </div>
      </div>
    </header>





/*占满整个屏幕*/
header{
    background-color: azure;
    z-index: -1;
}
.box1{
    position:relative;
    background-color:antiquewhite;
    width: 1200px;
    height: 1000px;
    left: 100px;
    margin: auto;
    left: 0;
    right: 0;
}
.box2{
    width: 1000px;
    height: 600px;
    list-style: none;
    padding: 0;
}
/*轮播图定位*/
.list{
    width: 1000px;
    height: 600px;
    list-style: none;
    padding: 0;
    position: relative;
}
/*轮播图图片样式*/
.item{
    width: 100%;
    height: 100%;
    background-size: cover;
    position:absolute;
    top: 130px;
    left: 100px;
    opacity: 0;
    transition: all 1.5s;
}
.item.active{
    opacity:1;
    z-index: 10;
}
.item:nth-child(1){
    background-image: url(img/H[UZ6EFU}}R4F\(KJ\(XU5~7I.jpg);
}
.item:nth-child(2){
    background-image: url(img/V39~3RGN8X\(TOAV7CBA\(U_J.jpg);
}
.item:nth-child(3){
    background-image: url(img/H[UZ6EFU}}R4F\(KJ\(XU5~7I.jpg);
}
.item:nth-child(4){
    background-image: url(img/H[UZ6EFU}}R4F\(KJ\(XU5~7I.jpg);
}
.item:nth-child(5){
    background-image: url(img/V39~3RGN8X\(TOAV7CBA\(U_J.jpg);
}
/*左右按钮样式和定位*/
.box1-button{
    width: 50px;
    height: 100px;
    cursor: pointer;
    z-index: 20;
}
.box1-button:hover{
    background-color: rgb(255,255,255,0.2)
}
#left{
    position: absolute;
    left: 100px;
    top: 380px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    border-radius: 0 5px 5px 0;
    color: rgb(0,0,0,0.5);
}
#right{
    position: absolute;
    right: 100px;
    top: 380px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    border-radius: 5px 0 0 5px;
    color: rgb(0,0,0,0.5);
}
/*轮播图下小按钮定义和样式*/
.pointlist{
    padding-left: 0px;
    list-style: none;
    position: absolute;
    bottom: 300px;
    right: 300px;
    z-index: 100;
}
.point{
    width: 20px;
    height: 20px;
    background-color: rgb(255,255,255,0.4);
    border-radius: 100%;
    float: left;
    margin-right: 15px;
    border: 2px solid rgb(255,255,255,0.2);
    cursor: pointer;
}
.point:hover{
    background-color: rgb(255,255,255,0.8)
}
.point.active{
    background-color: lightgray;
}





//获取item，point，left，right
let items=document.getElementsByClassName("item");
let points=document.getElementsByClassName("point");
let leftbtn=document.getElementById("left");
let rightbtn=document.getElementById("right");
//定义index
let index=0;
//定义清除.active函数
let clearActive=function(){
    for(let i=0;i<items.length;i++){
        items[i].className="item";
    }
    for(let i=0;i<points.length;i++){
        points[i].className="point";
    }
}
//切换图片函数
let goIndex=function(){
    clearActive();
    items[index].className="item active";
    points[index].className="point active";
}
//切换下一张图片函数
let right=function(){
    if(index<4){
        index++;
    }else{
        index=0;
    }
    goIndex();
}
//切换上一张图片函数
let left=function(){
    if(index==0){
        index=4;
    }else{
        index--;
    }
    goIndex();
}
//定义全局变量time
var time=0;
//定时器函数，100ms一个单位
setInterval(function(){
    time++;
    if(time==50){
        right();
        time=0;
    }
},100)
//轮播图下方小点跟随图片切换
for(let i=0;i<points.length;i++){
    points[i].addEventListener("click",function(){
        let pointIndex=this.getAttribute("data-index");
        index=pointIndex;
        goIndex();
        time=0;
    })
}
//实行切换图片函数
rightbtn.addEventListener("click",function(){
    right();
    time=0;
})
leftbtn.addEventListener("click",function(){
    left();
    time=0;
})