很多前端都離不開滾動的特效，調用插件繁瑣，后期更改麻煩，考慮到這些因素，自己寫了一套無限循環滾動的小特效。

首先滾動特效很好寫，用css就可以完成，下面寫一個基礎css向上循環滾動特效

html

<div class="wrap"><div class="content"> <p>第一行數據</p> <p>第二行數據</p></div></div>

css

.wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%}p{margin:0;height: 30px;width: 100%}.content p{position: absolute;}@-webkit-keyframes anim1{0% {top: 30px;opacity: 1}50% {top: -30px;opacity: 1}75% {top: -30px ;opacity: 0}100%{top:30px;opacity: 0}}@-webkit-keyframes anim2{0% {top: -30px;opacity: 0}25% {top: 30px;opacity: 0}50% {top: 30px;opacity: 1}100%{top: -30px;opacity: 1}}.content p:nth-child(1){background-color: red;}.content p:nth-child(2){background-color: yellow;}.content p:nth-child(1){-webkit-animation: anim1 3s linear infinite;}.content p:nth-child(2){-webkit-animation: anim2 3s linear infinite;}

?

?上面html+css就可以實現滾動了，不過我們要是想左右滾動，滾動圖片，并且想循環滾動就需要通過js來完成了，這個功能的重點在于循環滾動，那如何讓滾動過得圖片在從末尾出來呢，對此我想到了一個解決方案，就是同樣的圖片出現兩組，讓兩組圖片頭尾相連，當地二組圖片頭部滾動到第一組頭部的位置時，就讓兩組圖片的位置還原，這樣就悄無聲息的交換了位置，速度之快用肉眼是看不出來的，廢話不多說，下面掛代碼

html

<div class="xiangshang"><div class="box1" id="box1"><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu1.png)no-repeat;">中建三局西安奧體中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu2.png)no-repeat;">中建八局西安國際會議中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu3.png)no-repeat;">北京城建北京大興國際機場</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu4.png)no-repeat;">中建八局山東科技館新館</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu5.png)no-repeat;">中建一局阿里云谷園區</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu6.png)no-repeat;">中建八局廣西分公司昆明恒隆廣場</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu7.png)no-repeat;">中建一局、三局深圳國際會展中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu8.png)no-repeat;">中建八局西安絲路國際會覽中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu9.png)no-repeat;">中建一局城市副中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu10.png)no-repeat;">中建三局寧波國華金融大廈項目</div></div><div class="box2" id="box2"><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu1.png)no-repeat;">中建三局西安奧體中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu2.png)no-repeat;">中建八局西安國際會議中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu3.png)no-repeat;">北京城建北京大興國際機場</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu4.png)no-repeat;">中建八局山東科技館新館</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu5.png)no-repeat;">中建一局阿里云谷園區</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu6.png)no-repeat;">中建八局廣西分公司昆明恒隆廣場</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu7.png)no-repeat;">中建一局、三局深圳國際會展中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu8.png)no-repeat;">中建八局西安絲路國際會覽中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu9.png)no-repeat;">中建一局城市副中心</div><div class="xiangxiao" style="background: url(__STATIC__/web/img/xiangmu10.png)no-repeat;">中建三局寧波國華金融大廈項目</div></div></div>

?css

.xiangshang {height: 48%;width: 100%;overflow: hidden;position: relative; } .box1, .box2{width: 3530px;height: 100%;position: absolute; }.box2{left: 3530px; }

?js

// 項目滾動特效var _box1 = document.getElementById("box1");var _box2 = document.getElementById("box2");var _box3 = document.getElementById("box3");var _box4 = document.getElementById("box4");var x = 0;var y = 0;var fun = function() {_box1.style.left = x + 'px';_box2.style.left = (x + 3530) + 'px';_box3.style.right = y + 'px';_box4.style.right = (y + 3530) + 'px';x--;y--;if ((x + 3530) == 0) {x = 0;}if ((y + 3530) == 0) {y = 0;}}$(".xiangxiao").mouseover(function() {$(this).css("background-size", "120% 120%");});$(".xiangxiao").mouseout(function() {$(this).css("background-size", "100% 100%");});setInterval(fun, 10);

這里box1和box2就是上面所說的兩組圖片了，可以看到他們中的內容是一模一樣的，通過js我們可以看出他的計算和移動過程，那么這個box3和box4就是反方向的移動計算，在html和css里并沒有表現出來，同時為了展現鼠標懸停的效果，在鼠標經過時加上了背景圖片放大的特效。這樣滾動樣式的特效就做好了。

轉載于:https://www.cnblogs.com/qihongbao/p/11071983.html

總結

以上是生活随笔為你收集整理的前端小插件之手写js循环滚动特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。