子比主题添加滚动图片广告位html小工具

美化图：

效果就是上图这样，图片自动滚动，挺适合做广告位，也可以放一些自己网站特色的内容宣传图。

将下面代码放置在小工具——自定义HTML即可

html代码

<div class="one">
    <ul style="left: -788px;">
        <li><a href="/"><img src="https://images.aaym.net/<a href="https://sjcnh.cn/tag/2023nian" target="_blank">2023</a>/10/<a href="https://sjcnh.cn/tag/2023nian" target="_blank">2023</a>1028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
    </ul>
 </div>

css样式：

放入自定义css中或者自行html中引入

.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 ;
}

js代码：

放入自定义js中，或者自行html引入