WordPress子比主题首页自定义滚动图片广告代码

这段图片滚动代码适配子比主题，非常漂亮，可以在网站任意位置放置。

使用方法：可在子比主题的网站后台，外观—自定义HTML—添加到任意页面位置

在自定义HMTL代码窗口，填写以下三段代码即可。

代码里面的图片链接和超链接替换为你自己的即可。

效果如下：是滚动的哦！

<div class="one">
    <ul style="left: -788px;">
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 0px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 0px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
        <li><a href="https://www.xbwxw.net/"><img src="/image/gt1.jpg" >
            <span style="width: 240px;">西北文学滚动图片广告位</span></a>
        </li>
    </ul>
 </div>

<style>
 .one {
 margin: 10px auto;
 height: 160px;
 overflow: hidden;
 position: relative;
 width: 100%;
}

.one ul {
 height: 160px;
 width: 100000px;
 position: absolute;
 left: 0;
}
/*ul width的宽不能过小*/
.one ul li {
 display: block;
 float: left;
 margin: 5px;
 height: 150px;
 border-radius: 20px;
 position: relative;
}

.one ul li a {
 display: inline-block;
 height: 150px;
}

.one ul li img {
 border-radius: 20px;
 display: block;
}

.one ul li a span {
 height: 0;
 display: block;
 background: #f9f9f9cc;
 position: absolute;
 bottom: 0;
 color: #ff4f4f;
 font-size: 0px;
}

.one ul li a:hover span {
 height: 150px;
 line-height: 150px;
 font-size: 20px;
 text-align: center;
 transition: all 0.7s;
 border-radius: 20px ;
}

.two {
 margin: 50px auto;
 height: 90px;
 
 overflow: hidden;
 position: relative;
}

.two ul {
 height: 90px;
 width: 100000px;
 position: absolute;
 left: 0;
}/*ul width的宽不能过小*/
.two ul li {
 display: block;
 float: left;
 margin: 5px;
 height: 80px;
 border-radius: 20px;
 position: relative;
}

.two ul li a {
 display: inline-block;
 height: 80px;
}

.two ul li img {
 display: block;
 border-radius: 20px;
 height: 80px;
}

.two ul li a span {
 height: 0;
 display: block;
 background: #f9f9f9cc;
 position: absolute;
 bottom: 0;
 color: #ff4f4f;
 font-size: 0px;
}

.two ul li a:hover span {
 height: 80px;
 line-height: 80px;
 font-size: 20px;
 text-align: center;
 transition: all 0.7s;
 border-radius: 20px ;
}
</style>