javascript - 轮播点击向右滚动，元素style,left已经改变了，但是图片还是没动

问题描述

问 题

<figure class="banner-wrap">
        <ul id="slider" style="left: 0px;">
            <li>
                <a href="#">
                    <img src="imgs/banner1.gif">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imgs/banner2.gif">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imgs/banner3.gif">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imgs/banner4.gif">
                </a>
            </li>
        </ul>
        <div class="banner-ctrl">
            <a href="#" class="prev"> < </a>
            <a href="#" class="next"> > </a>
        </div>
    </figure>

    <script>
        window.onload = (function(){
            var next = document.querySelector('.next');
            var prev = document.querySelector('.prev');

            slider = document.getElementById('slider');
            // slider.style.left = 0 + 'px';

            function slide(e){
                e.preventDefault();
                slider.style.left = parseInt(slider.style.left) - 984 + 'px';

                console.log(slider.style.left)
            }

            next.addEventListener('click',slide,false);
        })()
    </script>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    display: block;
}
li{
    list-style-type: none;
    float: left;
}
.banner-wrap{
    width: 984px;
    height: 209px;
     overflow: hidden; 

    margin: 0 auto;

    position: relative;

    
}
.banner-wrap img,.banner-wrap ul li{
    width: 984px;
    height: 209px;
}
.banner-wrap ul{
    width: 3936px;
    height: 209px;
    display: flex;
    flex-direction: row;
}

.banner-ctrl>a{
    position: absolute;

    top: 50%;
    transform: translateY(-20px);

    width: 20px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #999;
    background-color: #333;
    opacity: 0.3;

}
.banner-wrap:hover > .banner-ctrl>a{
    opacity: 0.9;
}
.banner-ctrl .prev{
    left: 10px;
}
.banner-ctrl .next{
    right: 10px;
}

解决方案

是不是ul没有设置position:absolute?

这篇关于javascript - 轮播点击向右滚动，元素style,left已经改变了，但是图片还是没动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！