轮播图：制作（html,css,js）

最新推荐文章于 2023-03-29 15:12:06 发布

半浮名

最新推荐文章于 2023-03-29 15:12:06 发布

阅读量684

点赞数

分类专栏：网页设计笔记文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_51813155/article/details/121236438

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

网页设计

6 篇文章 0 订阅

订阅专栏

轮播图：制作（html,css,js）

原理：（之后补充）

代码：

<!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>
</head>





<style>



li{list-style: none;}


    .main{
position: relative;
width: 900px;
height: 300px;
overflow: hidden;
border: 10px solid black;
    }

.image{

position: absolute;

    width: 300%;
    height: 100%;
    padding: 0%;
    margin: 0%;
}


.img{

    width: 33.3%;
    height: 100%;
    float: left;
    background-color: skyblue;
   
}


.img:nth-child(1){
    background-image: url(../个人页面制作/2052182.jpg);
}



.img:nth-child(2){
    background-image: url(../个人页面制作/2052563.jpg);
}
.img:nth-child(3){
    background-image: url(../个人页面制作/2052545.jpg);
}   




.min{

position: absolute;
bottom: 20px;
width: 40%;
right: 5%;


}
.minth{
float: left;
width: 60px;
height: 60px;
border-radius: 50%;
border: solid 5px rgba(255, 255, 255, 0.5);
margin-left: 10px;
cursor: pointer;
}

.minth:nth-child(1){
    background-image: url(../个人页面制作/2052882.jpg);
    background-size: 100%;
}
.minth:nth-child(2){
    background-image: url(../个人页面制作/2052882.jpg);
    background-size: 100%;
}
.minth:nth-child(3){
    background-image: url(../个人页面制作/2052882.jpg);
    background-size: 100%;
}



.button-left,.button-right{


width: 85px;
height: 100%;
position: absolute;

background-color: rgba(255, 255, 255, 0.5);
opacity: 0.5;


}
.button-left{
    left: 0;
}
.button-right{
    right: 0;
}



.button1,.button2{

   width: 85px;
   height: 10%; 
position: absolute;
top: 50%;
text-align: center;
font-size: 50px;
}


</style>
<body>
    










<div class="main"><ul class="image">
    <li class="img">1</li>
    <li class="img">2</li>
    <li class="img">3</li>
</ul>


<ul class="min">
    <li class="minth"></li>
    <li class="minth"></li>
    <li class="minth"></li>
</ul>



<div class="button-left">
    <div class="button1"><</div>
</div>
<div class="button-right">
    <div class="button2">></div>
</div>




</div>

<script>

var image=document.querySelector('.image');
var minth=document.querySelector('.minth');
var button1=document.querySelector(".button1");
var button2=document.querySelector(".button2");
var index=0;

console.log(minth);

button2.onclick=function(){


    if(index<2){
        index++;
image.style.left=(index*(-100))+'%';
console.log(image.style.left);
console.log("11");

    }
    else{
        index=0;
        image.style.left=(index*(-100))+'%';

    }
}



button1.onclick=function(){


    if(index==0){
   index=3;
image.style.left=(2*(-100))+'%';
console.log(image.style.left);
console.log("11");
index=2;

    }
    else{
        index--;
        image.style.left=(index*(-100))+'%';

    }








}


setInterval(function(){


    if(index<2){
        index++;
image.style.left=(index*(-100))+'%';
console.log(image.style.left);
console.log("11");

    }
    else{
        index=0;
        image.style.left=(index*(-100))+'%';

    }
}



,1000)




</script>


</body>
</html>