写一个[图片无缝向左连续滚动]究竟有多复杂

傷城~ 2021-10-24 06:31 196阅读 0赞

“向左”，“滚动”，这是要解决的要点，而这两方向，都与对象的scrollLeft属性相关。对于scrollLeft,直白理解就是：对象的内容（即其整个innerHTML)，如果能够左右滚动的话（这是前提条件），它在某时刻左边滚动了的像素距离（结果为数字，并且该属性是可写可读的）。这里需要注意的是，虽然document.body.scrollLeft需要考虑兼容性问题，但其它的div的scrollLeft是兼容的，这里无需考虑兼容性问题。

所以不管读取或者设置scrollLeft的值，都必须有个前提条件：能左右滚动！！！  
比如有一个id=mydiv的DIV,在一个不能左右滚动的前提条件下，比如其overflow设置为visible或者overflow没有设置.它会怎么样呢？

mydiv会表现为被内容自动撑开,内容有多长多宽，div就自动多长多宽，div不出现滚动条。这时候scrollLeft读取到的值为0，并且无论如何设置scrollLeft的值，它都为0。这可以说明，如果其不能左右滚动，那scrollLeft就一直为0.

接下来，我们准备制造出“能左右滚动”的这种前提条件。

要出现scrollLeft，就必须：能左右滚动。这个限制会让我们将对象的overflow属性设置成auto，hidden,scroll,并且限制对象的width。但往往auto只会造成上下滚动而非左右。所以我们只能考虑scroll与hidden。

考虑以下代码：

它的效果是：  
![378855-20160414175356520-536356460.jpg][]

我们虽然设置了overflow为scroll。它能左右滚动了吗？不能。虽有滚动条，但呈灰色，不能左右拉动。因为overflow:scroll的前提是内容超出指定的宽高才会出现的，由于里边的内容不够长，最终导致不会出现左右方面的scroll点。

在实际场景下，我们的内容是可以很长的，放几张美女图片，增长内容，比如：

其效果如下：  
![378855-20160414175434504-2109638958.jpg][]

内容已经足够长的啦。但它出现了上下滚动条，没有出现左右滚动条。因为它自动换行了。我们让它浮动吧，希望它能变成行内元素。

#mydiv a {float:left;margin:0 10px;}

但浮动这是没作用的。mydiv的宽高已经固定，a作为其子元素，如何浮动到一定宽度一定会自动换行。我们不能变化mydiv的宽度，那如何办呢？大家应该都能想到：  
再套一个div,作为mydiv的子元素，设定其宽很长很长。  
代码如下：

<!DOCTYPE html>
    <html>
    <style>
    #mydiv{
         width:600px; height:100px; margin:20px;border: 3px solid #8ec2f5; padding:0; background:#d6e9fc; overflow:scroll;}
    
    #mysubdiv{
         margin:0; padding:0;width:9999px; height:100px;}
    img {
         width:100px; height:100px;}
    #mydiv a {
         float:left;margin:0 10px;}
    </style>
    <div id="mydiv">
    <div id="mysubdiv">
    <a href="#"><img src="http://h.hiphotos.baidu.com/image/h%3D300/sign=1655a14ec15c10383b7ec8c28211931c/2cf5e0fe9925bc31a365a0cc59df8db1cb1370ae.jpg"></a>
    <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/503d269759ee3d6d26a5088c44166d224f4ade12.jpg"></a>
    <a href="#"><img src="http://h.hiphotos.baidu.com/image/pic/item/f703738da9773912f4750a26ff198618367ae222.jpg"></a>
    <a href="#"><img src="http://g.hiphotos.baidu.com/image/pic/item/0ff41bd5ad6eddc447d63bbc3edbb6fd52663347.jpg"></a>
    <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/b21bb051f81986187d1660c34ded2e738bd4e620.jpg"></a>
    <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/1f178a82b9014a90b559c9faae773912b31bee16.jpg"></a>
    <a href="#"><img src="http://a.hiphotos.baidu.com/image/pic/item/b3fb43166d224f4a58fcfc540ef790529822d114.jpg"></a>
    <a href="#"><img src="http://f.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6b057d72fafaaf51f3de6647.jpg"></a>
    </div>
    </div>

效果：  
![378855-20160414175612488-1161236252.jpg][]

现在终于左右能滚动了。此时，我们的scrollLeft可以派上用场了：

效果如下：

![378855-20160414175640676-1797099811.jpg][]

既然scrollLeft是可读可写的，并且在一开始的时候，它的值为0.我们现在让scrollLeft每秒增加10。一个向左滚动的原型就出现了。

效果如下：

![378855-20160414175717801-165516298.jpg][]

目前它的缺点就是：由于9999px长度的mysubdiv的空白还要走。  
![378855-20160414175742504-736505246.jpg][]

那有什么办法，让它不走空白，而走重复的图片内容呢？大家很容易就想到，将空白的内容用重复的图片占用掉就可以了。最容易的办法，就是再diy几个mysubdiv的innerHTML，接在原先的后面，要做到这样，可以采用再套子div的办法，代码如下：

<!DOCTYPE html>
    <html>
    <style>
    #mydiv{
         width:600px; height:100px; margin:20px;border: 3px solid #8ec2f5; padding:0; background:#d6e9fc; overflow:hidden;}
    
    #mysubdiv{
         margin:0; padding:0;width:9999px; height:100px;}
    #mypicdiv{
         margin:0; padding:0;width:auto; height:100px; float:left;}
    #mypicdiv2{
         margin:0; padding:0;width:auto; height:100px;float:left;}
    img {
         width:100px; height:100px;}
    #mydiv a {
         float:left;margin:0 10px;}
    </style>
    <div id="mydiv">
    <div id="mysubdiv">
    <div id="mypicdiv">
    <a href="#"><img src="http://h.hiphotos.baidu.com/image/h%3D300/sign=1655a14ec15c10383b7ec8c28211931c/2cf5e0fe9925bc31a365a0cc59df8db1cb1370ae.jpg"></a>
    <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/503d269759ee3d6d26a5088c44166d224f4ade12.jpg"></a>
    <a href="#"><img src="http://h.hiphotos.baidu.com/image/pic/item/f703738da9773912f4750a26ff198618367ae222.jpg"></a>
    <a href="#"><img src="http://g.hiphotos.baidu.com/image/pic/item/0ff41bd5ad6eddc447d63bbc3edbb6fd52663347.jpg"></a>
    <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/b21bb051f81986187d1660c34ded2e738bd4e620.jpg"></a>
    <a href="#"><img src="http://d.hiphotos.baidu.com/image/pic/item/1f178a82b9014a90b559c9faae773912b31bee16.jpg"></a>
    <a href="#"><img src="http://a.hiphotos.baidu.com/image/pic/item/b3fb43166d224f4a58fcfc540ef790529822d114.jpg"></a>
    <a href="#"><img src="http://f.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef6b057d72fafaaf51f3de6647.jpg"></a>
    </div>
    
    <div id="mypicdiv2"></div>
    </div>
    </div>
    <script>
    var mydiv = document.getElementById('mydiv');
    var mypicdiv = document.getElementById('mypicdiv');
    var mypicdiv2 = document.getElementById('mypicdiv2');
    mypicdiv2.innerHTML = mypicdiv.innerHTML;
    
    var myScroll = function(){
    mydiv.scrollLeft=mydiv.scrollLeft+10;
    document.title=mydiv.scrollLeft;
    }
    window.setInterval(myScroll,1000);
    </script>

![378855-20160414175823457-104271955.jpg][]

目前它要走的空白已经短了，为了让它的空白全部消除，最原先我们的办法可以是：  
1.多造几个mypicdiv那样的浮动块，占够位置。  
2.将mysubdiv的width改少一些。  
但这两种办法都无法彻底将空白删除，不是剩余空白就是不够空白导致换行。  
那有没有一种办法能够不用消灭空白而直接可以“连接向左滚动”的呢？  
办法就是：当刚好滚动了一个mypicdiv的距离的时候（"刚好"的意思，这需要很精细的刻度，所以需要让scrollLeft每次变化尽量少，即每次变化+1,而一个mypicdiv的距离，需要用到对象属性：offsetWidth），又重新回到mypicdiv去滚动（即让scrollLeft=0)。这样，就会连续滚动mypicdiv,并且后边接着的mypicdiv2就能造成无缝的效果。  
代码如下：

以上代码调整了变化的速度，以及大小。  
效果如下：  
![378855-20160414175928254-1176239336.jpg][]

![378855-20160414175938113-2130147955.jpg][]

这样就简单地完成了一个图片无缝向左滚动。设置mydiv的overflow:hidden，去除滚动条（但隐式地有“能左右滚动”），让美观更好一点。注意：document.title=mydiv.scrollLeft;这一行只用于调试查看，实际用途中必须删除。

从html结构（及相关CSS设置）上看，需要达到的条件如下图所示：  
![378855-20160414175957863-955302213.jpg][]

从JS角度上看，需要知道的技术也不过如下：  
innerHTML,scrollLeft,offsetWidth,setInterval

所以如果需要简单地写一个图片无缝向左滚动，还是可以轻易完成的。

转载于:https://www.cnblogs.com/dreamyoung/p/5392104.html

[378855-20160414175356520-536356460.jpg]: /images/20211023/015a5c12884a470aa96fcde41caca915.png
[378855-20160414175434504-2109638958.jpg]: /images/20211023/e5a8b1aaf4144e5480cbd608a4620657.png
[378855-20160414175612488-1161236252.jpg]: /images/20211023/c8015b729e2a45f688d381f78e826ca5.png
[378855-20160414175640676-1797099811.jpg]: /images/20211023/1a0e6b687aac4622ac2f6843c88e6fca.png
[378855-20160414175717801-165516298.jpg]: /images/20211023/d8b664a5c5344ce3811b1b4ea0455bd4.png
[378855-20160414175742504-736505246.jpg]: /images/20211023/5f1177fec7b6494e86a483356865898a.png
[378855-20160414175823457-104271955.jpg]: /images/20211023/ca2809af8ad044b09c8b26fb37de3ec3.png
[378855-20160414175928254-1176239336.jpg]: /images/20211023/752083d770364b94b0eb8a4b9b239611.png
[378855-20160414175938113-2130147955.jpg]: /images/20211023/bc70635125b14cdb941e7e55d8b9d694.png
[378855-20160414175957863-955302213.jpg]: /images/20211023/2927b53139a945aa959b6d510b1ec75e.png