純代碼實現網站頭部Banner圖輪播的方法

251次閱讀

共計 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>

在線演示

正文完