共计 1340 个字符，预计需要花费 4 分钟才能阅读完成。
网站本来追求简洁，但是发现轮播功能还是挺实用的，所以就给网站捣鼓了一番，给网站的头部增加了 Banner 图轮播功能，纯粹代码实现，如果你也想给网站添加轮播特效，不妨参考一下。
纯代码实现网站头部 Banner 图轮播的方法
首先在 <head></head> 中引入 CSS
<link rel="stylesheet" href="/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" ></a>
</li>
<!-- <li class="second" style="background:#aac7f3 url(https://www.juzihuang.com/hello/banner2.jpg) center center no-repeat;background-size: cover;">
<a target="_blank" ></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" ></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" ></a>
</li>
</ul>
</div>
<script src="/daohang/gundong/static/js/jquery.min.js"></script>
<script src="/daohang/gundong/static/js/jquery.edslider.js"></script>
<script>
$(function() {$('.banner-inner').edslider({
width : '100%',
height:'100%'
});
});
</script>正文完
