JS实现图片滚动（无缝、平滑、上下左右滚动）效果

最新推荐文章于 2023-09-01 20:38:02 发布

javaer-路小明

最新推荐文章于 2023-09-01 20:38:02 发布

阅读量1.6k

点赞数

分类专栏： js、jquery、ajax

js、jquery、ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS图片滚动（无缝、平滑、上下左右滚动）效果</title>
<style type="text/css">
ul { list-style: none outside none; margin: 0; padding: 0; }
ul li img { border: medium none; display: block; }
#colee, #colee_bottom { float: left; margin-bottom: 24px; margin-right: 24px; }
#colee_left { clear: left; margin-bottom: 24px; }
#colee, #colee_bottom { height: 249px; overflow: hidden; width: 75px; }
#colee ul li, #colee_bottom ul li { margin-bottom: 12px; }
#colee_left, #colee_right { overflow: hidden; width: 510px; }
#colee_left ul, #colee_right ul { overflow: hidden; width: 783px; }
#colee_left ul li, #colee_right ul li { display: inline; float: left; margin-right: 12px; }
</style>
</head>
<body>

<div id="colee">
<div id="colee1">
    <ul>
      <li><a href="#"><img src="http://farm1.static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
      <li><a href="#"><img src="http://farm1.static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
    </ul>
</div>
<div id="colee2"></div>
</div>
<script type="text/javascript">
    var speed = 30;
    var colee2 = document.getElementById("colee2");
    var colee1 = document.getElementById("colee1");
    var colee = document.getElementById("colee");
    colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
    function Marquee1() {
        //当滚动至colee1与colee2交界时
        if (colee2.offsetTop - colee.scrollTop <= 0) {
            colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
        } else {
            colee.scrollTop++;
        }
    }
    var MyMar1 = setInterval(Marquee1, speed); //设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的
    colee.onmouseover = function() {
        clearInterval(MyMar1);
    }
    //鼠标移开时重设定时器
    colee.onmouseout = function() {
        MyMar1 = setInterval(Marquee1, speed);
    }
</script>



<script type="text/javascript">
    var speed = 30;
    var colee_bottom2 = document.getElementById("colee_bottom2");
    var colee_bottom1 = document.getElementById("colee_bottom1");
    var colee_bottom = document.getElementById("colee_bottom");
    colee_bottom2.innerHTML = colee_bottom1.innerHTML;
    colee_bottom.scrollTop = colee_bottom.scrollHeight;
    function Marquee2() {
        if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0) {
            colee_bottom.scrollTop += colee_bottom2.offsetHeight;
        } else {
            colee_bottom.scrollTop--;
        }
    }
    var MyMar2 = setInterval(Marquee2, speed);
   colee_bottom.onmouseover = function() {
        clearInterval(MyMar2);
    }
    colee_bottom.onmouseout = function() {
        MyMar2 = setInterval(Marquee2, speed);
    }
</script>


<script type="text/javascript">
    //使用div时，请保证colee_left2与colee_left1是在同一行上.
    var speed = 30; //速度数值越大速度越慢
    var colee_left2 = document.getElementById("colee_left2");
    var colee_left1 = document.getElementById("colee_left1");
    var colee_left = document.getElementById("colee_left");
    colee_left2.innerHTML = colee_left1.innerHTML;
    function Marquee3() {
        if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) { //offsetWidth 是对象的可见宽度
            colee_left.scrollLeft -= colee_left1.offsetWidth; //scrollWidth 是对象的实际内容的宽，不包边线宽度
        } else {
            colee_left.scrollLeft++;
        }
    }
    var MyMar3 = setInterval(Marquee3, speed);
    colee_left.onmouseover = function() {
        clearInterval(MyMar3);
    }
    colee_left.onmouseout = function() {
        MyMar3 = setInterval(Marquee3, speed);
    }
</script>


<script type="text/javascript">
    var speed = 30; //速度数值越大速度越慢
    var colee_right2 = document.getElementById("colee_right2");
    var colee_right1 = document.getElementById("colee_right1");
    var colee_right = document.getElementById("colee_right");
    colee_right2.innerHTML = colee_right1.innerHTML;
    function Marquee4() {
        if (colee_right.scrollLeft <= 0) {
            colee_right.scrollLeft += colee_right2.offsetWidth;
        } else {
            colee_right.scrollLeft--;
        }
    }
    var MyMar4 = setInterval(Marquee4, speed);
    colee_right.onmouseover = function() {
        clearInterval(MyMar4);
    }
    colee_right.onmouseout = function() {
        MyMar4 = setInterval(Marquee4, speed);
    }
</script>

</body>
</html>

javaer-路小明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现图片滚动（无缝、平滑、上下左右滚动）效果

JS图片滚动（无缝、平滑、上下左右滚动）效果ul { list-style: none outside none; margin: 0; padding: 0; }ul li img { border: medium none; display: block; }#colee, #colee_bottom { float: left; margin-bottom: 24px; ma
复制链接

扫一扫

专栏目录