简单的滚动轮播图

最新推荐文章于 2022-11-05 16:33:29 发布

月半小夜屈

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量99

点赞数

文章标签： javascript css html chrome

本文链接：https://blog.csdn.net/qq_41599604/article/details/124920416

版权

整体实现效果

1.整体html布局

<body>
    <div class="box">
        <ul class="Ul">
            <li><img src="images/1.jpg" alt="">
                <p>好浪漫！狮子猎豹蹲坐"彩虹尽头"</p>
            </li>
            <li><img src="images/2.jpg" alt="">
                <p>刘炜宣布退役 回顾传奇"8号"</p>
            </li>
            <li><img src="images/3.jpg" alt="">
                <p>疑似吴亦凡女友生活照模样清纯</p>
            </li>
            <li><img src="images/4.jpg" alt="">
                <p>不做韭菜，叶女侠带你修炼</p>
            </li>
            <li><img src="images/5.jpg" alt="">
                <p>007新武器阿斯顿·马丁Valhalla</p>
            </li>
            <li><img src="images/6.jpg" alt="">
                <p>靠网红发卡凹出少女感</p>
            </li>
            <li><img src="images/7.jpg" alt="">
                <p>河北饶阳："民族乐器进校园"</p>
            </li>
        </ul>

        <ol class="Ol">
            <li style="background-color: orange;"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </div>
</body>

2.css样式修饰

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        li {
            list-style-type: none;
        }

        .box {
            width: 240px;
            height: 350px;
            position: relative;
            overflow: hidden;
        }

        ul {
            
            height: 100%;
            display: flex;
           
            position: absolute;

            left: 0;
            top: 0;
        }

        ul li {
            position: relative;

        }


        img {
            width: 240px;
            height: 350px;
        }



        ol {
            position: absolute;
            top: 300px;
            left: 50%;
            transform: translateX(-50%);
        }

        ol li {
            float: left;
            display: block;
            margin: 5px;
            width: 5px;
            height: 5px;
            background-color: #555;

        }

        p {
            width: 100%;
            height: 30px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.7);
            text-align: center;
            font-size: 14px;
        }

        span {
            position: absolute;
            bottom: 10px;
            cursor: pointer;
        }

        span:nth-of-type(1) {
            left: 5px;
        }

        span:nth-of-type(2) {
            right: 5px;
        }
    </style>

3.JS代码

<script src="js/utils.js"></script>
<script>
    var ul = document.querySelector('.Ul')
    var ol = document.querySelector('.Ol')
    var leftBtn = document.querySelector('.left')
    var rightBtn = document.querySelector('.right');
    var box = document.querySelector('.box')
    var firstLi = ul.children[0].cloneNode(true)
    var lastLi = ul.children[ul.children.length - 1].cloneNode(true)
    ul.appendChild(firstLi)
    ul.insertBefore(lastLi, ul.children[0])

    ul.style.width = ul.children.length * firstLi.offsetWidth + 'px'

    ul.style.left = -firstLi.offsetWidth + 'px'

    var index = 1
    var flag = true
    rightBtn.onclick = function () {
        if (!flag) return false

        flag = false

        index++
        for (let a = 0; a < ol.children.length; a++) {
            ol.children[a].style.backgroundColor = '#000'
        }
        if (index === ul.children.length - 1) {
            ol.children[0].style.backgroundColor = 'orange'
        } else {
            ol.children[index - 1].style.backgroundColor = 'orange'
        }
        animate(ul, {
            left: -index * firstLi.offsetWidth
        }, function () {
            if (index === ul.children.length - 1) {
                index = 1
                ul.style.left = -index * firstLi.offsetWidth + 'px'
            }


            flag = true
        })

    }

    leftBtn.onclick = function () {

        if (!flag) return false

        flag = false

        index--
        for (let a = 0; a < ol.children.length; a++) {
            ol.children[a].style.backgroundColor = '#000'
        }
        if (index === 0) {
            ol.children[ul.children.length - 3].style.backgroundColor = 'orange'
        } else {
            ol.children[index - 1].style.backgroundColor = 'orange'
        }

        animate(ul, {
            left: -index * firstLi.offsetWidth
        }, function () {

            if (index === 0) {
                index = ul.children.length - 2

                ul.style.left = -index * firstLi.offsetWidth + 'px'
            }

           
            flag = true
        })

    }

    for (let b = 0; b < ol.children.length; b++) {
        ol.children[b].onmouseover = function () {
            if (!flag) return false
            flag = false

            index = b + 1
            for (let a = 0; a < ol.children.length; a++) {
                ol.children[a].style.backgroundColor = '#000'
            }
            ol.children[index - 1].style.backgroundColor = 'orange'
            animate(ul, {
                left: -index * firstLi.offsetWidth
            }, function () {

                if (index === 0) {
                    index = ul.children.length - 2

                    ul.style.left = -index * firstLi.offsetWidth + 'px'
                }


                flag = true
            })
        }
    }

    var timer = setInterval(function () {
        rightBtn.onclick()
    }, 2000)

    box.onmouseover = function () {
        clearInterval(timer)
    }
    box.onmouseout = function () {
        timer = setInterval(function () {
            rightBtn.onclick()
        }, 2000)
    }
</script>

月半小夜屈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的滚动轮播图

整体实现效果1.整体html布局<body> <div class="box"> <ul class="Ul"> <li><img src="images/1.jpg" alt=""> <p>好浪漫！狮子猎豹蹲坐"彩虹尽头"</p> </li> <li&gt...
复制链接

扫一扫