原生js无缝衔接滚动

最新推荐文章于 2023-10-16 11:19:09 发布

Archer_yy

最新推荐文章于 2023-10-16 11:19:09 发布

阅读量540

点赞数

本文链接：https://blog.csdn.net/Dilemma_me/article/details/101542133

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>面向对象图片滚动效果</title>
<style>

*{margin:0;padding:0;list-style-type:none;border:0;}

.demo{width:270px;margin:20px auto;}
#scrollbox{background:#FFF;overflow:hidden;width:192px;height:256px;margin:0 10px;display:inline;float:left;}
#scrollbox img{border:3px solid #F2F2F2;}
#leftDir{width:20px;height:40px;padding:8px 0px;text-align:center;float:left;cursor:pointer;margin:90px 0 0 0;}
#rightDir{width:20px;height:40px;padding:8px 0px;text-align:center;float:left;cursor:pointer;margin:90px 0 0 0;}

</style>

</head>

<body>
        <div class="demo">
                <div id="leftDir"><<</div>
                <div id="scrollbox">
                    <div id="scrollcon">
                        <ul id="scrollpic">
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>
                                <li class="picture"><a href="#"><img src="" alt=""></a></li>  
                        </ul>
                        <div id="scrollpic-copy"></div>
                    </div>
                </div>
                <div id="rightDir">>></div>
            </div>
  

</div> 

</body>
</html>

<script type="text/javascript">
    //上下无缝滚动
    var speed = 10;
    var direction="top";
    var tab = document.getElementById("scrollbox");
    var tab1 = document.getElementById("scrollpic");
    var tab2 = document.getElementById("scrollpic-copy");
    var leftDir = document.getElementById("leftDir");
    var rightDir = document.getElementById("rightDir");
    tab2.innerHTML = tab1.innerHTML;
    function marquee(){
        switch(direction){
            case "top":
                if(tab2.offsetHeight - tab.scrollTop <= 0){
                    tab.scrollTop -= tab1.offsetHeight;
                }
                else{
                    tab.scrollTop++;
                }
            break;
            case "bottom":
                if(tab.scrollTop <= 0){
                    tab.scrollTop += tab2.offsetHeight;
                }
                else{
                    tab.scrollTop--;
                }
            break;
        }
    }
    function changeDirection(dir){
       direction = dir;
    }
    var timer = setInterval(marquee,speed);
    tab.onmouseover = function(){clearInterval(timer);};
    tab.onmouseout = function(){timer = setInterval(marquee,speed);};
    leftDir.onclick = function(){changeDirection("top");};
    rightDir.onclick = function(){changeDirection("bottom");};
    
    </script>