js实现图片左右滚动

JavaScript023

js实现图片左右滚动,第1张

代码:

    <title></title>

    <style>

        body{

            margin:0

            padding:0

            background-color:transparent

        }

        div{

            width:350px

            overflow:hidden

        }

        table img{

            width:100px

            height:100px

        }

    </style>

</head>

<body>

    <div id="picScroll">

        <table>

            <tr>

                <td><a><img src="../pic/1.jpg" /></a></td>

                <td><a><img src="../pic/2.jpg"></a></td>

                <td><a><img src="../pic/3.jpg"></a></td>

                <td><a><img src="../pic/4.jpg"></a></td>

                <td><a><img src="../pic/5.jpg"></a></td>

            </tr>

        </table>

    </div>

</body>

</html>

<script>

    var target = $('#picScroll')

    var left = 0

    var speed = 30

    function Marqeen() {

        if (target[0].offsetWidth <= left) {

            left -= target[0].offsetWidth

        }

        else {

            left++

        }

        target.scrollLeft(left)

    }

    $(function () {

        var marQueen = window.setInterval(Marqeen, speed)

        target.mouseover(function () {

            clearInterval(marQueen)

        })

        target.mouseout(function () {

            marQueen = window.setInterval(Marqeen, speed)

        })

    })

</script>

#box1 div:hover{

animation-play-state: paused

}

animation--play-state属性指定动画是否正在运行或已暂停。

语法: animation-play-state: paused|running

paused 指定暂停动画

running 指定正在运行的动画

如果你是用一个比较成熟的框架的话,排除框架错误后,只剩下一个就是CSS写的不正确。

好好查查CSS写的是不是和你下载下来的这个框架的CSS写的一样,再查查HTML是不是和原版一样。