您现在的位置是:首页>学习分享
拖拽轮播 2019-08-28 43
<!DOCTYPEhtml>
<html>
<head>
    <metacharset="utf-8"/>
    <title>拖拽轮播</title>
</head>
<style>
    *{margin:0;padding:0;}
    .banner{width:400px;position:relative;margin:0auto;overflow:hidden; }
    .banner>ul{position:relative;overflow:hidden; }
    .banner>ul>li{float:left;width:400px;height:300px;font-size:24px;color:#FFF;text-align:center;line-height:300px;list-style:none; }
</style>
<body>
<div class="banner"id="banner">
    <ul id="ul">
        <li  style="background: red"><span>1</span></li>
        <li  style="background: blue"><span>2</span></li>
        <li  style="background: yellow"><span>3</span></li>
        <li  style="background: green"><span>4</span></li>
        <li  style="background: black"><span>5</span></li>
    </ul>
</div>
<script>
    window.onload=function() {
        constbanner=document.getElementById("banner");
        constul=document.getElementById("ul");
        constli=ul.getElementsByTagName("li");
        letx0,isClick=false,Left=0,difX;
        ul.style.width=li[0].offsetWidth*li.length+'px';

        banner.addEventListener('mousedown',function(e) {
            x0=e.clientX;
            isClick=true;
        });
        banner.addEventListener('mousemove',function(e) {
            if(isClick) {
                difX=e.clientX-x0;
                ul.style.left=difX+Left+'px';
            }
        });
        banner.addEventListener('mouseup',function(e) {
            isClick=false;
            Left+=difX;
            if(Math.abs(difX) <li[0].offsetWidth/2||Math.abs(Left/li[0].offsetWidth) >=li.length-1) {
                if(Math.abs(Left/li[0].offsetWidth) <1&&difX<=0) {
                    Left=Left-difX-li[0].offsetWidth;
                }else{
                    Left=Left-difX;
                }
            }else{
                if(difX>0) {
                    if(Math.abs(Left/li[0].offsetWidth) <1) {
                        Left=Left-difX;
                    }else{
                        Left=Left-difX+li[0].offsetWidth;
                    }
                }else{
                    Left=Left-difX-li[0].offsetWidth;
                }
            }
            ul.style.left=Left+'px';
        });
    }
</script>
</body>
</html>

文章评论
关注我们
  • 微信公众号
  • 我的微信

站点声明:

1、本网站文章部分出自互联网,如无意中侵犯了某个媒体或个人的知识产权,请来信(987354940@qq.com)告之,本网站将立即删除。

Copyright © www.zhangqingblog.com All Rights Reserved. 备案号:鄂ICP备18005731号-2