本文提供的知识教程均为网络共享资源，切勿商用，商用请支持正版教程。
下面是相关代码教程，其中涉及到两个图片素材，素材给大家提高了链接，自己可以下载到本地替换在上传替换成自己的链接。
1.b2后台模块管理-首页-添加自定义模块页面选择铺满，放入以下代码
<!--首页视频区块--> <div id="page-wrapper"> <div class="home-banner por"> <section class="section"> <div class="video-wrapper"> <video poster="/pic/2f518848202a4.jpg" autoplay playsinline="" loop muted="" src="https://cloud.video.taobao.com//play/u/581890066/p/1/e/6/t/1/360238629009.mp4" __idm_id__="2285569"></video> </div> <div class="video-overlay"></div> </section> <div class="layout-center poa" style="width: 1200px;top: 0;left: 50%;margin-left: -600px;"> <div class="home-banner-content clearfix"> <div class="slogan-text por fl"> <p>采集号</p><i class="iblock poa corner"></i> <p class="promote-sub-title line-one">专注<span style="display: inline-block;overflow: hidden;line-height: 34px;vertical-align: -9px;"><em id="goal-works" value="5351266"><ps style="color: #26d6c8;">优质内容<ps></em></span>分享！</p> </div> </div> <div class="home-banner-search por searchv2-top-m"> <div class="primary-menus" style=" width: 92%; position: unset;transform: translate(1px, 1px);"> <div class="search-types-cycles poa"> <ul class="selects"> <li data-target="search_1">百度</li> <li data-target="search_2">Bing</li> <li data-target="search_3" class="current">站内搜索</li> <li data-target="search_4">360</li> <li data-target="search_5">哔哩哔哩</li> <li data-target="search_6">头条搜索</li> <li data-target="search_8">知乎</li> </ul> </div> <div class="cont"> <div class="left-cont"> <form class="search hidden" id="search_1" action="https://www.baidu.com/s?wd=" method="get" target="_blank"> <input type="text" name="wd" class="s" placeholder="请输入关键词"> <button type="submit" name="" class="btn">百度搜索</button> </form> <form class="search hidden" id="search_2" action="https://cn.bing.com/search?q=" method="get" target="_blank"> <input type="text" name="q" class="s" placeholder="请输入关键词"> <button type="submit" name="" class="btn">Bing搜索</button> </form> <form class="search" id="search_3" action="/?s=" method="get" target="_blank"> <input type="text" name="s" class="s" placeholder="请输入关键词"> <button type="submit" name="" class="btn">站内搜索</button> </form> <form class="search hidden" id="search_4" action="https://www.so.com/s?q=" method="get" target="_blank"> <input type="text" name="query" class="s" placeholder="请输入关键词"> <button type="submit" name="" class="btn">360搜索</button> </form> <form class="search hidden" id="search_5" action="https://search.bilibili.com/all?keyword=" method="get" target="_blank"> <input type="text" name="q" class="s" placeholder="请输入关键词"> <button type="submit" name="" class="btn">哔哩哔哩</button> </form> <form class="search hidden" id="search_6" action="https://so.toutiao.com/search?dvpf=pc&source=input&keyword=" method="get" target="_blank"> <input type="text" name="q" class="s" placeholder="请输入关键词"> <button type="submit" name="" class="btn">头条搜索</button> </form> <form class="search hidden" id="search_8" action="https://www.zhihu.com/search?q=" method="get" target="_blank"> <input type="text" name="q" class="s" placeholder="请输入关键词"> <button type="submit" name="" class="btn">知乎搜索</button> </form> <a class="hot-top text-notify" href="/category/seying" target="_blank" tips="摄影素材" direction="bottom"> <img src="https://www.caijihao.com/wp-content/uploads/2022/06/rank.svg" class="icon-rank" height="15">摄影素材</a> </div> </div> </div> <p class="home-banner-links line-one">热搜词：<a href="/?s=蠢沫沫" target="_blank" class="iblock">蠢沫沫</a><a href="/?s=雨波" target="_blank" class="iblock">雨波</a><a href="/?s=bilibili" target="_blank" class="iblock">bilibili</a><a href="/?s=粉色的猪" target="_blank" class="iblock">粉色的猪</a> <a href="/?s=森萝财团" target="_blank" class="iblock">森萝财团</a><a href="/?s=Byoru" target="_blank" class="iblock">Byoru</a> </p> <script src="/hitokoto/?format=js&charset=utf-8"></script> <style> </style> <p class="home-banner-linkss line-one1"> <script> hitokoto() </script> </p> </div> </div> <!-- 头部快速链接导航 --> <div class="top-navs poa"> <div class="layout-center clearfix" style="width: 1200px;"> <div class="top-navs-l fl"> <div class="top-navs-l-item fl"> <p class="top-navs-l-title"> <a href="/document" target="_blank" class="block"> <svg class="icon-dhs" aria-hidden="true"> <use xlink:href="#hg-zixun1"></use> </svg>文档指南</a> </p> <p class="top-navs-l-links"><a href="/requests" class="fl" target="_blank">提交工单</a><a href="/document" class="fl" target="_blank">帮助中心</a> </p> </div> <div class="top-navs-l-item fl"> <p class="top-navs-l-title"> <a href="/category/seying" target="_blank" class="block"> <svg class="icon-dhs" aria-hidden="true"> <use xlink:href="#hg-huodong"></use> </svg>优质栏目</a> </p> <p class="top-navs-l-links"><a href="/category/seying/cos" class="fl" target="_blank">COS素材</a><a href="/category/seying/hj" class="fl" target="_blank">摄影合集</a> </p> </div> <div class="top-navs-l-item fl"> <p class="top-navs-l-title"> <a href="#" target="_blank" class="block"> <svg class="icon-dhs" aria-hidden="true"> <use xlink:href="#hg-gongwenbao"></use> </svg>问题反馈</a> </p> <p class="top-navs-l-links"><a href="/document/196.html" class="fl" target="_blank">失效反馈</a><a href="/category/invalid" class="fl" target="_blank">失效栏目</a> </p> </div> <div class="top-navs-l-item fl"> <p class="top-navs-l-title"> <a href="#" target="_blank" class="block"> <svg class="icon-dhs" aria-hidden="true"> <use xlink:href="#hg-chakansousuo"></use> </svg>会员中心</a> </p> <p class="top-navs-l-links"><a href="/vips" class="fl" target="_blank">开通会员</a><a href="#" class="fl" target="_blank">会员活动</a> </p> </div> <div class="top-navs-l-item fl"> <p class="top-navs-l-title"> <a href="https://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" target="_blank" class="block"> <svg class="icon-dhs" aria-hidden="true"> <use xlink:href="#hg-dingwei"></use> </svg>合作伙伴</a> </p> <p class="top-navs-l-links"><a href="#" class="fl" target="_blank">广告投放</a><a href="#" class="fl" target="_blank">友情链接</a> </p> </div> </div> <div class="top-navs-m fl"> <a href="/gold-top" target="_blank" class="fl">财富排行</a> <a href="/dark-room" target="_blank" class="fl">小黑屋</a> <a href="/task" target="_blank" class="fl">任务大厅</a> <a href="/mission/today" target="_blank" class="fl">签到管理</a> </div> <div class="top-navs-r fl clearfix"> <a class="fl" rel="nofollow" target="_blank" href="/verify"> <svg class="icon-dhs" aria-hidden="true"> <use xlink:href="#hg-yonghu"></use> </svg> <p>高级认证</p> </a> <a class="fl" target="_blank" href="/vips"> <svg class="icon-dhs" aria-hidden="true"> <use xlink:href="#hg-huiyuan"></use> </svg> <p>会员办卡</p> </a> </div> </div> </div> </div> </div>
2.以下JS代码放入child.js
/*首页动态大图搜索开始*/
(function($){
var m=$('.primary-menus');
if(m.length<1) return;
var ul=m.find('.selects');
if(ul.length<1) return;
var lis=ul.children('li');
if(lis.length<1) return;
var s=m.find('.search');
var sVal=s.find('.s').val();
lis.on('click',function () {
var d=$(this).attr('data-target');
if (d) {
lis.removeClass('current');
$(this).addClass('current');
s.addClass('hidden');
s.filter('#'+d).removeClass('hidden');
//s.filter('#'+d).find('.s').val('');
s.filter('#'+d).find('.s').trigger('focusin');
}
});
s.find('.s').on('focusin',function () {
if ($(this).val()==sVal) {
$(this).val('');
}
})
s.find('.s').on('focusout',function () {
var v=$(this).val();
if (orz.isEmpty(v)) {
v=sVal;
}
s.find('.s').val(v);
})
})(jQuery);
/*首页动态大图搜索结束*/
