[讨论] 字幕特效不间断滚动图片_无js语言（详解）

谢谢枳橘吟老师热情分享这么好的代码！

上次看到过你发的这个效果，没时间仔细研究，今天要好好学习一下！

枳橘吟老师发明的2楼那个效果非常漂亮！

　　我试着换了三张大小相同的图片来看效果

　　我发现一点小问题：就是左圆柱的右边和右圆柱的右边都和图像之间有一条缝隙

　　
　　

　　我尝试修改左圆柱left: -1px，好像问题解决了。右圆柱我也修改为left: -1px，发现那条缝隙却跑到了右边

　　

　　我只好复原left: 0px，设置width: 199px后，我发现问题也解决了。

　　我觉得圆柱窄一些好看，想将右圆柱宽度设为和左圆柱宽度一样，发现有些麻烦，要修改很多数据～～

　　今天就研究到这里吧，先吃饭去了～～

非常详细的代码教程，谢谢枳橘吟老师的无私奉献！

　　玩上瘾了？谢谢婷版关注，奖励，倾情尝试。
　　萌生制作中的想法到实现这个玩意，历时数年。如果用js实现不间断效果，在网上有数不清的资料，不过基本相同。应用js，在发帖上在某些网站无法实现，因此，对免js实现同样的效果便“耿耿于怀”了。
　　首帖，应该说清“道理”了。它与原来的做法只是增加了一个“装载图片的容器”。再咯嗦一下：
　　１、再打个比方。这个容器好比火车厢，将图片装在里面。
　　２、现在，字幕功能针对的就是“容器”了。往返的时间、移动的距离都是针对“容器”；
　　３、图片的位置只与“容器”相关，与“字幕功能”无直接关系了；它可以在容器内任意设置位置，不受“字幕功能”的管束。
　　　　还以火车厢比方，就是图片在车厢内怎么放与车厢怎么移动可以分开考虑。

　　上面几点可以算作“基本原理”，想清楚了，就可以随心所欲了。
　　“容器”宽度很容易算出来：需显示的图片的总宽（不包括增加的）减去“字幕显示窗”的宽度。

　　我的制作中，有点乱来，没考虑美观，只是在想问题，解决问题，实现自己的想法（自己出题自己做），验证自己的想法是否经得住各种情况的“考验”。滚轴左小右大即是出于这些原因。就是想试试，不同的情况是否也能“通过”。
　　二楼的习作，由三部分组成，基本代码实际上是一样的（不间断滚动）。不同之处：
　　１、左、右部分将图片左右反向（整体或单张反向均可），图片的排列顺序也要反过来；
　　　　如果中间部分排序为：１、２、３、４，那么左、右的就应为：４、３、２、１；
　　２、在其上增加表格，实现不透明效果，产生“圆柱”效果。
　　３、将三个“不间断”效果靠在一起；
　　４、以左部分为准，调整中间部分的图片位移，使得在视觉效果上这两部分的图片能“衔接”上；然后，以中间部分为准，调整右部分的图片，使中、右部分的图片效果“衔接”上。当然也可以以中间部分为准，来调整左、右部分的图片位移。因图片位移造成空缺，当然还是按顺序，以其相邻的图片补充。
　　这样做，是想“以假乱真”。不过有些自找麻烦。
　　图片在定位上应该移动多少、左移还是右移，是可以计算得到的，不是猜或是盲目试出来的（尝试时，取整数为好，免得增加麻烦）。只要领会了首帖中的内容，怎么变也不会迷糊。一楼为单一对象，简单得多；二楼玩花样，而且是不同方向移动，多个对象需要衔接，名堂就多了些。

　　你想将“右柱”改小，这很简单。将“左柱”的代码复制、替换“右柱”的代码，然后调整一下“右柱”图片的位移就可以了（如果中间部分的宽度改动了，需改动的地方稍多一点）。



[本帖最后由 枳橘吟 于 2011-8-22 13:58 编辑]

这个效果很漂亮！我也要学学。谢谢枳橘吟朋友热情分享！

　　感谢关注、支持。

非常感谢枳橘吟老师！您的热情、耐心、无私令我非常感佩！

因为一些原因，我可能较长时间不能上网了，也不能再跟您学习代码知识了～～

能在华声认识像您这样风格高尚，乐于奉献的良师益友，是我极大的荣幸！
衷心的祝福您：健康、快乐、幸福、平安！

　　大年夜吃年饭，尽是好话。谢谢婷版褒奖。
　　不要说跟我学什么，交流一下罢了。
　　忙正事要紧。闲暇时、需要时再交流。
　　也祝愿你，诸事安好、顺利。

卡不懂

枳橘吟真代码高手，期望你更多特效代码出现。

　　感谢关注和鼓励。不言高手、低手，只是玩玩。
　　也感谢 维度视觉设计 朋友赏光。

学习了

感谢朋友关注。

枳老辛苦了，问好。

非常细致的原理分析，巧妙使用了人体的视觉暂留效应和错觉，简单实用的图片回环滚动展示方法！