如何用JS实现图片自动滚动
说到让图片自己“乖乖”自动滚动，其实主要就是利用JS里的一个小帮手——setInterval()函数。这个函数挺神奇的，它能按照你设置的时间间隔不停地调用某个函数。比如说你要让图片每隔两秒往左滑一点，就可以写个滚动函数用setInterval()循环调用，这样图片看上去就不断地动了。滑动的原理其实就是通过改变图片容器的left或margin属性，让它们慢慢移动。
如果你想让滚动看起来很专业，还可以做成那种无缝滚动的效果，这样最后一张滑完接着是第一张，循环往复，非常顺畅。实现技巧就是复制第一张图片放到最后面，当滚动滑到复制的那张时，快速重置位置回开始点，感觉就像是图片一直滚一样，超级酷。
为什么JS图片滚动时显示不全 或 不连续滚动的原因有哪些
这里给你总结几个超级常见但又让人头疼的小问题，务必要注意哦：
-
图片尺寸不合适
有时候图片本身太大了，尺寸超过了容器大小，或者在CSS里设置了不合理的宽高，就会让图片部分被挡住，显示不完整。还有容器如果没有设置overflow: auto或scroll，或者设置了overflow: hidden，图片超出部分就看不见啦。 -
父元素样式影响
父元素的CSS样式，比如设置了overflow: hidden，导致超出边界的图片被遮盖，也会让图片显示不全，或者滚动卡顿。 -
宽度计算错误导致滚动停止
很多小伙伴遇到滚动几下就停了，根本原因通常是滚动宽度没算准。滚动时通常要把两个版块（原版块和复制版块）并排组成一个大版块，在设置滚动范围时要计算到这两个版块的总宽度，如果宽度错了，js判断位置时就出错，滚动会神秘地停住。 -
JS逻辑或动画库使用问题
如果JS代码里判断条件写错，或者动画库调用不好，也会让滚动停下来或者不连续。 -
如何实现图片从下往上滚动且停留几秒
这里推荐用jQuery配合动画效果。比如用marginTop从0到-25px动画，再重置参数，通过setInterval定时调用，给人间歇式滚动效果，很nice。网上有很多现成的jQuery相册代码，其中带缩略图的特别方便，够用。 -
手动滚动图片怎么做
如果图片要从数据库提取，然后做手动翻页，网上有大量“有缩略图的jQuery相册代码”可以借鉴，方便又实用，不用自己从零开始写哦。 -
小圆点指示器的实现原理
轮播图里那个一排小圆点，是根据图片张数动态生成的。默认第一个是激活状态，点击小圆点会通过改变ul的left值切换到相应的图片。逐渐改变left而不是突然跳动，让滚动效果更流畅。
相关问题解答
-
为什么用JS做图片自动滚动时图片会显示不全?
哎呀，这个问题其实挺常见的！基本上都是图片尺寸和容器不匹配惹的祸。比如你的图片太大了，超出那个容器框框，但容器没给可滚动空间，或者CSS里设置了overflow: hidden，超出去的部分就给你藏起来了，看着就不完整了。
解决方法很简单哈，就是确保图片尺寸合理，或者给容器加个合适的滚动条，或者换成overflow: auto，这样图片就不会被截断啦。 -
为什么无缝滚动的图片老是滚动几下就停了?
嘿，这个问题听了心疼，滚动停止大多是因为宽度计算搞错了。你得确保滚动的区域包括了原图和复制图的总宽度，而且JS里判断位置的条件要写对。否则滚到“尾巴”那块就不知道跳回开始哪里去了，结果就停住不动了，烦人死了。
多测试下宽度参数，确保判断逻辑没错，保证循环滚动顺畅就好了。 -
如何做到图片从下往上滚动还能停留几秒呢?
这个其实挺好实现！可以用jQuery动画，比如让图片容器的marginTop慢慢变负再重置，然后利用setInterval设置一个时间间隔控制动画频率，让图片间隔几秒动作一下，看起来就像有节奏地滚动加停顿，挺舒服的。
网上有很多现成代码，可以直接用来改改，特别省心。 -
手动滚动图片要怎么从数据库取出来再展示呢?
哇，这个问题有点实际。基本上你得先后台取图片路径数据，然后前端用JS或jQuery遍历生成HTML结构。网上有很多“带缩略图的jQuery相册代码”，直接用这些开源的特效插件，能帮你快速实现手动切换、放大啥的效果，不用自己写复杂逻辑，省事又好看。
只要数据格式跟代码里用的对应上，插入图片很easy啦！
新增评论