纯marquee实现首尾相连滚动效果作用于轮播图的背景

admin

原创作者：G.FLOWER
创作日期：2020-08-20
转载请注明：否则视为剽窃
=================
演示:https://amoi.store

非常简单，只用到了6个CSS值，核心运用：position: absolute;z-index:999;前者悬浮，后者置顶。明天我会写一个特殊的轮播图，而且实现的代码也超级简单，简单到牛逼。
以下代码是使用透明云层做的轮播交错背景，，我尝试了多种滚动效果，非常棒。
direction的值：left，right，如果设置为同向，需要分配好不同的速度，达到没有间断的效果，经过调试，我滚动了半小时同向、交错都可以做到无间隙，可以在最底层分别做一个100/200/50速度值，防止万一滚空；
scrollamount的值为速度，建议跨度大一点，交错分布，比如：200/100/5/50/3/40/10/17/8/12/2，底层速度跑快一些，顶层跑慢一些，做好交错点即可做到同向或交错的无缝衔接。

1. <style>
   
2. .gunimg{
   
3.     width:100%;
   
4.     height:200px;
   
5. }
   
6. </style>
   
7. <div style="margin-left:-20px;    background:#00ddff; ">
   
8. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="50" contenteditable="true"
   
9. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
   
10. onmouseout="this.start();">
    
11.   <img class="gunimg" src="/lunboimg/11.png">  
    
12.   <img class="gunimg" src="/lunboimg/33.png">   
    
13.   <img class="gunimg" src="/lunboimg/22.png">
    
14.   <img class="gunimg" src="/lunboimg/44.png">
    
15.   <img class="gunimg" src="/lunboimg/11.png">   
    
16. </marquee>   
    
17. </div>
    
18. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
19. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="10" contenteditable="true"
    
20. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
21. onmouseout="this.start();">
    
22.   <img class="gunimg" src="/lunboimg/22.png">  
    
23.   <img class="gunimg" src="/lunboimg/44.png">   
    
24.   <img class="gunimg" src="/lunboimg/11.png">
    
25.   <img class="gunimg" src="/lunboimg/33.png">
    
26.   <img class="gunimg" src="/lunboimg/44.png">   
    
27. </marquee>   
    
28. </div>
    
29. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
30. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="3" contenteditable="true"
    
31. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
32. onmouseout="this.start();">
    
33.   <img class="gunimg" src="/lunboimg/11.png">  
    
34.   <img class="gunimg" src="/lunboimg/44.png">   
    
35.   <img class="gunimg" src="/lunboimg/22.png">
    
36.   <img class="gunimg" src="/lunboimg/11.png">
    
37.   <img class="gunimg" src="/lunboimg/33.png">   
    
38. </marquee>   
    
39. </div>
    
40. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
41. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="30" contenteditable="true"
    
42. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
43. onmouseout="this.start();">
    
44.   <img class="gunimg" src="/lunboimg/44.png">  
    
45.   <img class="gunimg" src="/lunboimg/11.png">   
    
46.   <img class="gunimg" src="/lunboimg/33.png">
    
47.   <img class="gunimg" src="/lunboimg/22.png">
    
48.   <img class="gunimg" src="/lunboimg/33.png">   
    
49. </marquee>
    
50. </div>
    
51. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
52. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="17" contenteditable="true"
    
53. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
54. onmouseout="this.start();">
    
55.   <img class="gunimg" src="/lunboimg/22.png">  
    
56.   <img class="gunimg" src="/lunboimg/33.png">   
    
57.   <img class="gunimg" src="/lunboimg/11.png">
    
58.   <img class="gunimg" src="/lunboimg/33.png">
    
59.   <img class="gunimg" src="/lunboimg/44.png">   
    
60. </marquee>  
    
61. </div>
    
62. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
63. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="27" contenteditable="true"
    
64. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
65. onmouseout="this.start();">
    
66.   <img class="gunimg" src="/lunboimg/11.png">  
    
67.   <img class="gunimg" src="/lunboimg/44.png">   
    
68.   <img class="gunimg" src="/lunboimg/11.png">
    
69.   <img class="gunimg" src="/lunboimg/33.png">
    
70.   <img class="gunimg" src="/lunboimg/22.png">   
    
71. </marquee>   
    
72. </div>
    
73.   
    
74. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
75. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="1" contenteditable="true"
    
76. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
77. onmouseout="this.start();">
    
78.   <img class="gunimg" src="/lunboimg/33.png">  
    
79.   <img class="gunimg" src="/lunboimg/11.png">   
    
80.   <img class="gunimg" src="/lunboimg/44.png">
    
81.   <img class="gunimg" src="/lunboimg/33.png">
    
82.   <img class="gunimg" src="/lunboimg/22.png">   
    
83. </marquee>   
    
84. </div>
    
85. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
86. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="14" contenteditable="true"
    
87. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
88. onmouseout="this.start();">
    
89.   <img class="gunimg" src="/lunboimg/33.png">  
    
90.   <img class="gunimg" src="/lunboimg/22.png">   
    
91.   <img class="gunimg" src="/lunboimg/44.png">
    
92.   <img class="gunimg" src="/lunboimg/11.png">
    
93.   <img class="gunimg" src="/lunboimg/33.png">   
    
94. </marquee>   
    
95. </div>
    
96.    
    
97. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
    
98. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="9" contenteditable="true"
    
99. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
    
100. onmouseout="this.start();">
     
101.   <img class="gunimg" src="/lunboimg/33.png">  
     
102.   <img class="gunimg" src="/lunboimg/44.png">   
     
103.   <img class="gunimg" src="/lunboimg/22.png">
     
104.   <img class="gunimg" src="/lunboimg/11.png">
     
105.   <img class="gunimg" src="/lunboimg/44.png">   
     
106. </marquee>   
     
107. </div>   
     
108.    
     
109. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
     
110. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="5" contenteditable="true"
     
111. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
     
112. onmouseout="this.start();">
     
113.   <img class="gunimg" src="/lunboimg/44.png">  
     
114.   <img class="gunimg" src="/lunboimg/22.png">   
     
115.   <img class="gunimg" src="/lunboimg/33.png">
     
116.   <img class="gunimg" src="/lunboimg/44.png">
     
117.   <img class="gunimg" src="/lunboimg/11.png">   
     
118. </marquee>   
     
119. </div>
     
120. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
     
121. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="45" contenteditable="true"
     
122. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
     
123. onmouseout="this.start();">
     
124.   <img class="gunimg" src="/lunboimg/33.png">  
     
125.   <img class="gunimg" src="/lunboimg/11.png">   
     
126.   <img class="gunimg" src="/lunboimg/44.png">
     
127.   <img class="gunimg" src="/lunboimg/33.png">
     
128.   <img class="gunimg" src="/lunboimg/22.png">   
     
129. </marquee>   
     
130. </div>
     
131. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:999;">
     
132. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="15" contenteditable="true"
     
133. onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" width="100%" onmouseover="this.stop();"
     
134. onmouseout="this.start();">
     
135.   <img class="gunimg" src="/lunboimg/22.png">  
     
136.   <img class="gunimg" src="/lunboimg/44.png">   
     
137.   <img class="gunimg" src="/lunboimg/11.png">
     
138.   <img class="gunimg" src="/lunboimg/33.png">
     
139.   <img class="gunimg" src="/lunboimg/44.png">   
     
140. </marquee>   
     
141. </div>

复制代码