用原生JS写的轮播效果,怎么让它有滑动的效果,不是直接切换

JavaScript024

用原生JS写的轮播效果,怎么让它有滑动的效果,不是直接切换,第1张

如果是朝左翻页,就把当前页朝左偏移100%的宽度,让下一页同样朝左偏移100%宽度。以下是代码部分:

<html><head lang="en"><meta charset="UTF-8"><title></title><style>.banner{ width:300pxheight:250pxposition: relativez-index: 100background: skybluemargin:100px autooverflow:hidden } .banner .first{ left:0} .banner a{ width: 100%height: 100%position: absolutedisplay:blocktop:0left:100%} .banner a img{ width: 100%height: 100%} .banner .pre{ position: absoluteleft:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .banner .next{ position: absoluteright:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .

手机移动端滑动事件当然是有的

touchmove即为滑动事件

还有其他触摸事件,都给列一下:

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

touchend事件:当手指从屏幕上离开的时候触发。

touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #menu {

    position: relative

    background: black

    width: 150px

    height: 30px

    margin: 200px auto

    overflow: hidden

}

#sc {

    position: absolute

    background-color: #80ffff

    width: 150px

    height: 120px

    top: 0

}

    </style>

    <script>

    </script>

</head>

<body>

    <div id="menu">

        <div id="sc"></div>

    </div>

    <script>

        var menu = document.getElementById('menu')

        var sc = document.getElementById('sc')

        var interval

        function menuscroll() {

            var top = parseFloat(sc.style.top) || sc.scrollTop

            top += 10

            sc.style.top = top + "px"

        }

        menu.onmouseenter = function() {

            interval = setInterval("menuscroll()", 90) 

        }

        menu.onmouseleave = function() {

            clearInterval(interval)

            sc.style.top = 0

        }

    </script>

</body>

</html>