原生js轮播图

最新推荐文章于 2025-04-21 00:30:00 发布
转载最新推荐文章于 2025-04-21 00:30:00 发布 · 置顶 · 255 阅读
JavaScript 同时被 2 个专栏收录
120 篇文章
订阅专栏
Js、Jq轮播图、切换
28 篇文章
订阅专栏
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="01.css">
</head>
<style>

.type_area{
    width: 1000px;
    overflow: auto;
}
img{
    height: 300px;
    width: 600px;
}
li{
    list-style: none;
}
.block_mediate{
    margin: 0 auto;
}
body,div,html,ul,li,button{
    padding: 0;
    margin: 0;
}
.carousel_container{
    position: relative;
    height: 300px;
    width: 600px;
    overflow: hidden;
}
/*.carousel{*/
    /**/

/*}*/
.carousel_item{
    height: 100%;
    width: 100%;
    font-size: 60px;
    font-family: Consolas;
    color:wheat;
    position: absolute;
    line-height: 300px;
    text-align: center;
    opacity: 0;
    transition:all 1s;
}
.carousel_item:nth-child(1){
    background-color: orange;
}
.carousel_item:nth-child(2){
    background-color: purple;
}
.carousel_item:nth-child(3){
    background-color: yellowgreen;
}
.carousel_item:nth-child(4){
    background-color: brown;
}
.carousel_item:nth-child(5){
    background-color: darkgoldenrod;
}

button{
    width: 60px;
    height: 60px;
    border:none;
    background-color: rgba(255,255,255,0);
    font-size: 40px;
    position: absolute;
    top:120px;
    z-index: 1230;
}
button:hover{
    background-color: rgba(1, 1, 1, 0.5);
    cursor: pointer;
}

.right{
    right:0px;
}
.left{
    left:0px;
}
.points{
    height: 30px;
    width: 200px;
    background-color: rgba(29, 22, 19, 0.2);
    position: absolute;
    bottom: 20px;
    left: 200px;
    border-radius: 10px 10px 10px 10px ;
    z-index: 1230;
}
.points_item{
    height: 15px;
    width: 15px;
    background-color: wheat;
    float: left;
    border-radius: 50%;
    margin-right: 20px;
    margin-top: 7px;

}
.points_item:nth-child(1){
    margin-left: 22px;
}
.points_item:hover{
    cursor: pointer;
}
.carousel_item.active{
    z-index: 123;
    opacity: 1;

}
.points_item.active{
    background-color: black;
}
</style>
<body>
<!--布局：-->
<!--1.图片，用于轮播展示。-->
<!--2.左右箭头，用于切换图片。-->
<!--3.圆点，用于显示正在展示第几张图片，也可以通过点击进行图片跳转。-->
<div class="exterior_container">
    <div class="carousel_container type_area block_mediate">
        <ul class="carousel">
            <li class="carousel_item active"><img src="1.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="2.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="3.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="1.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="3.jpg" alt="" class="src"></li>

        </ul>
        <button class="left">左</button>
        <button class="right">右</button>
        <ul class="points block_mediate">
            <li class="points_item active" data-index="0"></li>
            <li class="points_item" data-index="1"></li>
            <li class="points_item" data-index="2"></li>
            <li class="points_item" data-index="3"></li>
            <li class="points_item" data-index="4"></li>
        </ul>
    </div>
</div>
</body>
<!--动画：-->
<!--1.点击左右可以向左或者向右转换图片。-->
<!--2.点击下方圆点可以跳转到某一张图片-->
<!--3.假设显示第1张图片，那么第一个圆点的颜色与其他圆点颜色不一样。-->
<script>

// 获取图片组。
// 获取按钮*2。
// 获取圆点组。
let imgGroup=document.getElementsByClassName('carousel_item');
let btnLeft=document.getElementsByClassName('left')[0];
let btnRight=document.getElementsByClassName("right")[0];
let pointGroup=document.getElementsByClassName("points_item");

// console.log(imgGroup, btnLeft,btnRight,pointGroup);获取的元素是正确的
let index=0;//初始化一个索引值，用于切换图片。
let clearActive=function(){
    for(let i=0;i<imgGroup.length;i++){
        imgGroup[i].className="carousel_item";
        pointGroup[i].className="points_item";
    }
}
let goRight=function () {
    clearActive();
    if(index<4){
        index++;
    }
    else {
        index=0;
    }
    imgGroup[index].className="carousel_item active";
    pointGroup[index].className="points_item active";
}
let goRight_auto=goRight;

btnRight.addEventListener("click",goRight);

let goLeft=function () {
    clearActive();
    if(index>0){index--;}
    else {index=4;}
    imgGroup[index].className="carousel_item active";
    pointGroup[index].className="points_item active";
}

btnLeft.addEventListener("click",goLeft);


setInterval(function () {
    goRight_auto();
},5000);

let carouselContainer=document.getElementsByClassName("carousel_container")[0];
for(let i=0;i<pointGroup.length;i++){
    pointGroup[i].addEventListener("click",function(){
        index=this.getAttribute("data-index")-1;
        goRight();
    })
}


carouselContainer.addEventListener('mouseover',function () {
    goRight_auto=function(){};
});
carouselContainer.addEventListener('mouseleave',function () {
    goRight_auto=goRight;
});
</script>
</html>