纯代码实现网站头部Banner图轮播的方法

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

纯代码实现网站头部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(http://www.ixiari.cn/hello/banner1.jpg) center center no-repeat;background-size: cover;">
            <a target="_blank" href="http://www.ixiari.cn/music/"></a>
        </li>
       <!-- <li class="second" style="background:#aac7f3 url(http://www.ixiari.cn/hello/banner2.jpg) center center no-repeat;background-size: cover;">
            <a target="_blank" href="http://www.ixiari.cn/daohang/toufang/"></a>
        </li> -->
		<li class="second" style="background:#aac7f3 url(http://www.ixiari.cn/hello/banner21.jpg) center center no-repeat;background-size: cover;">
            <a target="_blank" href="http://www.ixiari.cn/t/"></a>
        </li>
        <li class="third" style="background:#aac7f3 url(http://www.ixiari.cn/hello/banner3.jpg) center center no-repeat;background-size: cover;">
            <a target="_blank" href="http://www.ixiari.cn/t/luoye/"></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>

[button url=”http://www.ixiari.cn/daohang/gundong/”]在线演示[/button]

版权声明:内容由互联网用户贡献,不代表本站立场,本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 546541225@qq.com 举报,一经查实,本站将立刻删除。