纯代码实现网站头部Banner图轮播的方法_生活百科

纯代码实现网站头部Banner图轮播的方法网站本来追求简洁，但是发现轮播功能还是挺实用的，所以就给网站捣鼓了一番，给网站的头部增加了Banner图轮播功能，纯粹代码实现，如果你也想给网站添加轮播特效，不妨参考一下。

文章插图

文章插图
纯代码实现网站头部Banner图轮播的方法
首先在<head></head>中引入CSS
<link rel="stylesheet" href="https://www.yf-zs.com/daohang/gundong/static/css/style.css">然后在需要展示的Body上方添加如下代码
<div class="index-banner"><ul class="banner-inner"><li class="first" style="background:#aac7f3 url(https://www.juzihuang.com/hello/banner1.jpg) center center no-repeat;background-size: cover;"><a target="_blank" href="https://www.juzihuang.com/music/"></a></li><li class="second" style="background:#aac7f3 url(https://www.juzihuang.com/hello/banner21.jpg) center center no-repeat;background-size: cover;"><a target="_blank" href="https://www.juzihuang.com/t/"></a></li><li class="third" style="background:#aac7f3 url(https://www.juzihuang.com/hello/banner3.jpg) center center no-repeat;background-size: cover;"><a target="_blank" href="https://www.juzihuang.com/t/luoye/"></a></li></ul></div><script src="http://img.caodingbaike.com/220901/1214315529-2.jpg"></script><script src="http://img.caodingbaike.com/220901/1214313260-3.jpg"></script><script>$(function() {$('.banner-inner').edslider({width : '100%',height:'100%'});});</script>【纯代码实现网站头部Banner图轮播的方法】在线演示