js实现左右自动滚动

Posted cl94

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现左右自动滚动相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现左右自动切换</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
    .b2{
        width: 1190px;
        height: 147px;
        margin: 44px auto 0;
        position: relative;
        overflow: hidden;
        background-color: gray;
    }
    .b2 .b2list{
        width: 2655px;
        height: 147px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .b2 .item{
        width: 285px;
        height: 147px;
        margin-left: 10px;
        float: left;
        border-top: 1px solid transparent;
        background-color: red;
    }
</style>
<body>
    <div class="b2">
        <div class="b2list" data="0">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </div>
    <script>
        $(function(){
            setInterval("auto_left_me();",3000);
        });
        function auto_left_me(){
            var num = $(".b2 .b2list").attr("data");
            num++;

            if(num>5){
                num=0;
            }
            $(".b2 .b2list").attr("data",num);
            $(‘.b2 .b2list‘).animate({‘left‘:-295*num});
        }

    </script>
</body>
</html>

 

以上是关于js实现左右自动滚动的主要内容，如果未能解决你的问题，请参考以下文章

HTML或JS代码如何实现让一个table的表头不动，body可以自由上下左右滚动，同时保持表头与body的宽度一致？

两行的左右滚动动，js怎么做

js实现点击箭头导航条左右滚动

jquery怎么实现手机触屏图片滑动代码,手向左或向右滑动，图片滑动。不滑动的时候图片自动循环滚动

js实现文字无间断左右滚动和图片左右滚动

图片左右按钮切换滚动的框架怎么做？