前端学习（八）----轮番图案例

最新推荐文章于 2022-12-02 14:09:20 发布

小天才阿展

最新推荐文章于 2022-12-02 14:09:20 发布

阅读量813

点赞数 1

文章标签： html5 css javascript 前端学习

本文链接：https://blog.csdn.net/m0_63057828/article/details/124099954

版权

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="./1.css">
</head>

<body>
    <div class="box">
        <ul class="list_box">
            <li class="list active">
                <img src="./1.webp" alt="">
            </li>
            <li class="list">
                <img src="./2.jpeg" alt="">
            </li>
            <li class="list">
                <img src="./3.webp" alt="">
            </li>
            <li class="list">
                <img src="./4.jpeg" alt="">
            </li>
            <li class="list">
                <img src="./5.jpeg" alt="">
            </li>
            <li class="list">
                <img src="./6.webp" alt="">
            </li>
        </ul>
        <button type="button" class="left"><</button>
        <button type="button" class="right">></button>
        <ul class="point_list">
            <li class="point change" 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>
            <li class="point" data-index='5'></li>
        </ul>
    </div>
    <script src="./1.js"></script>
</body>

</html>

css：

*{
    margin: 0px;
    padding: 0px;
}
.box{
   position: relative;
   width: 500px;
   height: 300px;
   display: flex;
   align-items: center;
}
.list_box{
    position: relative;
    align-self: flex-start;
}
.list{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 300px;
    width: 500px;
}
.active{
    z-index: 100;
}
.list img{
    height: 100%;
    width: 100%;
}
button{
    height: 40px;
    width: 30px;
    border: none;
    position: absolute;
    color: white;
    background-color: rgba(0,0,0,0.6);
    z-index: 200;
}
.left{
    border-radius:0px 30px 30px 0px ;
}
.right{
    border-radius:30px 0px 0px 30px ;
    right: 0px;
}
.point_list{
    display: flex;
    align-self: flex-end;
    margin: 0px auto;
}
.point{
    list-style: none;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.6);
    position: relative;
    z-index: 200;
    margin: 0px 3px;
}
.change{
    background-color: rgba(255,255,255,1);
}

js部分：

//获取元素
var leftBtn = document.getElementsByClassName('left')[0];
var rightBtn = document.getElementsByClassName('right')[0];
var list = document.getElementsByClassName('list');  
var point = document.getElementsByClassName('point');
//功能
var index = 0; 

var clear = function(){
    for(var i = 0 ; i < list.length ; i++){
        list[i].className = 'list'
        point[i].className = 'point'
    }
}
var render = function(){
    clear()
    point[index].className = 'point change'
    list[index].className='list active';
}
render()



leftBtn.addEventListener('click' , function(){
    index--; //改变index的值
    if(index < 0){
        index = 5;
    }
    render()   
})
rightBtn.addEventListener('click' , function(){
    index++; //改变index的值
    if(index > 5){
        index = 0;
    }
    render()
})


for(var i = 0 ; i < point.length ; i++){
    point[i].addEventListener('mousemove' , function(){
        //改变index的值
        //
        index = this.getAttribute('data-index')
        render()
    })
}