网易云轮播图

港控/mmm° 2023-06-24 08:19 21阅读 0赞

感觉轮播图运用的挺多，几乎每个网站上都有。所以做了个简单的网易云海报轮播。  
css自己看着写就好啦。说白了就是元素的隐藏和循环，主要代码如下：

html代码：

<div class="main">
    	    <div class="bigimg" id="bigimg">
    		    <img src="./images/table1.png" alt="">
    		    <h3>网易云推荐1</h3>
    	    </div>
    	    <div class="smalling" id="smalling">
    		    <ul>
    			    <li>
    				    <span class="border" style="display: block;"></span>
    				    <span class="mask" style="display: none;"></span>
    			    </li>
    			    <li>
    				    <span class="mask"></span>
    				    <span class="border"></span>
    			    </li>
    			    <li>
    				    <span class="mask"></span>
    				    <span class="border"></span>
    				</li>
    			    <li>
    				    <span class="mask"></span>
    				    <span class="border"></span>
    			    </li>
    			    <li>
    				    <span class="mask"></span>
    				    <span class="border"></span>
    			    </li>
    			    <li>
    				    <span class="mask"></span>
    				    <span class="border"></span>
    			    </li>
    			    <li>
    				    <span class="mask"></span>
    				    <span class="border"></span>
    			    </li> 
    		    </ul>
    	    </div>
    	</div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221220311746.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70