js第一份成果

最新推荐文章于 2023-08-09 23:10:39 发布

又要头秃了

最新推荐文章于 2023-08-09 23:10:39 发布

阅读量125

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_69289422/article/details/126504998

版权

源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left: 0px;
        }

        .item {
            margin-top: 50px;
            margin-left: 100px;
            width: 1300px;
            height: 600px;
            color: white;
            font-size: 50px;
            position: absolute;
            opacity: 0;
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-image: url(lun1.png);
        }

        .item:nth-child(2) {
            background-image: url(lun2.png);
        }

        .item:nth-child(3) {
            background-image: url(lun3.png);
        }

        .item:nth-child(4) {
            background-image: url(lun4.png);
        }

        .item:nth-child(5) {
            background-image: url(lun5.png);
        }
        .btn {
            margin-left: 100px;
            margin-top: 150px;
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }
        #goPre {
            left: 0px;
        }
        #goNext {
            right: -600px;
        }
        .item.active {
            opacity: 1;
            z-index: 10;
        }
        .pointList{
            padding-left: 0px;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
        }
        .point{
            width: 10px;
            height: 10px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 100%;
            float: left;
            margin-right: 16px;
            border: solid 2px rgba(255,255,255,0.6);

            cursor: pointer;
        }
        .point.active{
            background-color: rgba(255, 255, 255, 0.5);
        }
    </style>

</head>

<body>
    <div class="wrap">
        <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>
        <button type="button" class="btn" id="goPre"><</button>
        <button type="button" class="btn" id="goNext">></button>
    </div>
    <script type="text/javascript">
        var items = document.getElementsByClassName('item');
        var goPreBtn = document.getElementById('goPre');
        var goNextBtn = document.getElementById('goNext');
        var points = document.getElementsByClassName('point');

        var index = 0;
        var clearActive = function () {
            for (var i = 0; i < items.length; i++) {
                items[i].className = 'item';
            } 
            for(var i = 0; i < points.length; i++)  {
                points[i].className = 'point';
            }
        }
        var goIndex = function () {
            clearActive();
            console.log(index)
            items[index].className = 'item active';
            points[index].className = 'point active';
        }
        var goNext = function(){
            if(index < 4){
                index ++;
            } else{
                index = 0;
            }      
            goIndex();
        }
        var goPre = function(){
            if(index == 0){
                index = 4;
                
            } else{
                index --;
            }
            goIndex();
        }
        goNextBtn.addEventListener('click',function(){
            goNext();
        })
        goPreBtn.addEventListener('click',function(){
            goPre();
        })
    </script>

</body>

</html>

效果图：