swiper轮播图_.swiper-slide:nth-child(1) { background-image: url-程序员宅基地
本轮播图改造了swiper官网上有道提供的一个demo。
效果图如下：
特点：
1、同时展开三张图，每张图有a链接；
2、每次滑动一张图片的距离，即每次更新一张图片；
3、鼠标悬浮在具体图片上，从底部上浮文字内容；
4、初始化即可左右滑动切换，前后复制图片，不会出现没有图可切换的现象；
5、自动滑动，鼠标悬浮停止滑动，鼠标离开，继续滑动；
全文代码如下：（swiper引用文件可去官网下载）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有道banner-swiper</title>
<link rel="stylesheet" href="css/swiper.min.css">
<style>
@font-face{
font-family:'strawberryicon';
src:url("fonts/strawberryicon.eot?w9sgwo");
src:url("fonts/strawberryicon.eot?w9sgwo#iefix")
format("embedded-opentype"),
url("fonts/strawberryicon.ttf?w9sgwo")
format("truetype"),url("fonts/strawberryicon.woff?w9sgwo")
format("woff"),url("fonts/strawberryicon.svg?w9sgwo#strawberryicon")
format("svg");font-weight:normal;font-style:normal;
}
#youdaoBanner{
margin-top:20px;
}
#youdaoBanner .swiper-slide{
width: 590px;
height: 390px;
/*border-radius: 8px;*/
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position:relative;
}
/*#youdaoBanner .swiper-slide a{*/
/*width:590px;*/
/*height:392px;*/
/*display: block;*/
/*position: relative;*/
/*top:-454px;*/
/*cursor: pointer;*/
/*}*/
#youdaoBanner .swiper-slide img{
width:590px;
height:450px;
}
#youdaoBanner .swiper-slide:after {
z-index: 1;
opacity: 0.3;
background: #000;
transition: opacity .4s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
overflow: hidden;
display: block;
/*border-radius: 8px;*/
}
#youdaoBanner .swiper-button-prev,#youdaoBanner .swiper-button-next{
width: 60px;
height: 60px;
line-height: 60px;
font-size: 16px;
color: #fff;
background: rgba(0,0,0,0.2);
border-radius: 60px;
text-align:center;
opacity:1;
display:none;
}
#youdaoBanner:hover .swiper-button-prev,#youdaoBanner:hover .swiper-button-next{
display:block;
}
#youdaoBanner .swiper-button-prev:after {
content: "\e907";
display: block;
font-family: 'strawberryicon';
}
#youdaoBanner .swiper-button-next:after {
content: "\e908";
display: block;
font-family: 'strawberryicon';
}
/*#youdaoBanner .swiper-slide:nth-child(1){background-image:url(../uploads/img01.jpg);}*/
/*#youdaoBanner .swiper-slide:nth-child(2){background-image:url(../uploads/img02.jpg);}*/
/*#youdaoBanner .swiper-slide:nth-child(3){background-image:url(../uploads/img03.jpg);}*/
/*#youdaoBanner .swiper-slide:nth-child(4){background-image:url(../uploads/img04.jpg);}*/
/*#youdaoBanner .swiper-slide:nth-child(5){background-image:url(../uploads/img05.jpg);}*/
/*#youdaoBanner .swiper-slide:nth-child(6){background-image:url(../uploads/img06.jpg);}*/
/*#youdaoBanner .swiper-slide:nth-child(7){background-image:url(../uploads/img07.jpg);}*/
/*#youdaoBanner .swiper-slide:hover{*/
/*background: url(../img/logo.png) #fc6760 120px 250px no-repeat;*/
/*}*/
/*#youdaoBanner .swiper-slide:hover:after{*/
/*display:none;*/
/*}*/
#youdaoBanner .info{
display: block;
position: absolute;
padding:30px;
z-index:999;
transition: all .2s;
bottom: -149px;
color:#fff;
font-size:14px;
padding-top:30px;
text-align: center;
}
#youdaoBanner .swiper-slide:hover .info{
bottom:0px;
}
#youdaoBanner .info .date{
font-size: 14px;
margin-bottom: 16px;
}
#youdaoBanner .info h3{
margin-bottom: 18px;
color: #fff;
font-size: 24px;
font-weight: 500;
}
#youdaoBanner .info h3 a{
color: #fff;
font-size: 24px;
font-weight: 500;
text-decoration:none;
}
#youdaoBanner .info p{
height:90px;
text-indent:2em;
margin-top:40px;
margin-bottom:30px;
font-size: 16px;
}
#youdaoBanner .info .btn{
margin-top: 40px;
display: inline-block;
border: 2px solid #fff;
color: #fff;
font-size: 16px;
padding: 9px 35px;
border-radius: 20px;
line-height: 20px;
text-decoration:none;
}
#youdaoBanner .info .btn:hover{
background:#fff;
color:#000;
}
</style>
</head>
<body>
<div id="youdaoBanner" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img alt="loop-img" src="uploads/img01.png">
<a href="javascript:void(0);">
<div class="info">
<h3>GET2017教育大会 周枫：在线教育迎来大IP时代</h3>
<p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
</div>
</a>
</div>
<div class="swiper-slide">
<img alt="loop-img" src="uploads/img02.png">
<a href="javascript:void(0);">
<div class="info">
<h3>GET2017教育大会 周枫：在线教育迎来大IP时代</h3>
<p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
</div>
</a>
</div>
<div class="swiper-slide">
<img alt="loop-img" src="uploads/img03.png">
<a href="javascript:void(0);">
<div class="info">
<h3>GET2017教育大会 周枫：在线教育迎来大IP时代</h3>
<p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
</div>
</a>
</div>
<div class="swiper-slide">
<img alt="loop-img" src="uploads/img04.png">
<a href="javascript:void(0);">
<div class="info">
<h3>GET2017教育大会 周枫：在线教育迎来大IP时代</h3>
<p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
</div>
</a>
</div>
<div class="swiper-slide">
<img alt="loop-img" src="uploads/img05.png">
<a href="javascript:void(0);">
<div class="info">
<h3>GET2017教育大会 周枫：在线教育迎来大IP时代</h3>
<p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
</div>
</a>
</div>
<div class="swiper-slide">
<img alt="loop-img" src="uploads/img06.png">
<a href="javascript:void(0);">
<div class="info">
<h3>GET2017教育大会 周枫：在线教育迎来大IP时代</h3>
<p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
</div>
</a>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="js/swiper.min.js"></script>
<script>
var ydSwiper = new Swiper ('#youdaoBanner', {
centeredSlides : true,
slidesPerView : 'auto',
spaceBetween : 40,
loop:true,
loopedSlides: 8,
loopAdditionalSlides : 0,
loopFillGroupWithBlank: false,
autoplay:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
})
//鼠标覆盖停止自动切换
ydSwiper.el.onmouseover = function(){
ydSwiper.autoplay.stop();
};
ydSwiper.el.onmouseout = function(){
ydSwiper.autoplay.start();
};
</script>
</body>
</html>
智能推荐
已解决（selenium操作火狐浏览器报错）TypeError: __init__() got an unexpected keyword argument ‘firefox_options‘-程序员宅基地
文章浏览阅读1.6w次，点赞8次，收藏18次。已解决（selenium操作火狐浏览器报错）TypeError: __init__() got an unexpected keyword argument ‘firefox_options‘_typeerror: __init__() got an unexpected keyword argument 'chrome_options
python方差_Python编程：方差、标准差、均方差、均方根值、均方误差、均方根误差...-程序员宅基地
文章浏览阅读315次。python实现代码# -*- coding: utf-8 -*-import mathdef get_average(records):"""平均值"""return sum(records) / len(records)def get_variance(records):"""方差 反映一个数据集的离散程度"""average = get_average(records)return sum(..._pycharm方差计算代码
jmeter接口测试实例（五）对cookies的自动管理，实现登录后修改用户信息_jmeter中post请求如何更改每次的用户名-程序员宅基地
文章浏览阅读902次。一、前提：cookie是保存在本地，用来记录用户信息，最典型的作用是判断用户是否已经登录。如果一个接口，需要用户登录后，才能进行操作，如下，修改用户信息那么这时候，就需要用到cookie去识别这个登录的用户，因为要修改的是这个登录的用户的信息。二、使用1、jmeter.properties 中 将CookieManager.save.cookies 设置为true。完成后重启jmet..._jmeter中post请求如何更改每次的用户名
python新建项目没有venv_pycharm配置venv虚拟环境-程序员宅基地
文章浏览阅读7.5k次，点赞2次，收藏2次。虚拟环境的好处：搭建独立的python运行环境，不与其他产生冲突虚拟环境有助于包的管理和防止版本冲突3.删除卸载方便虚拟环境的搭建：1.进入python的Scripts下，执行：pip3 install virtualenv2.选择建立虚拟环境的文件夹，我这边是直接在D盘software下面创建了一个virtualenv，如图：image.png3.创建虚拟环境：virtualenv --no-s..._pycharm没有venv怎么办
M1芯片的Mac在开发iOS项目时遇到的问题汇总（模拟器无法运行，Cocoapods错误等）_oc cocospods 安装依赖库之后不能使用模拟器了-程序员宅基地
文章浏览阅读2.3k次。--pod install时报错，且错误提示中有“ffi”字眼，提示错误：/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3/lib/ffi/library.rb:275: [BUG] Bus Error at 0x00000001042fc000 ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.arm64e-darwin20]解决方案：juejin.cn/post/698064…--pod repo upd_oc cocospods 安装依赖库之后不能使用模拟器了
编辑器VSCode使用心得-程序员宅基地
文章浏览阅读540次。工欲善其事必先利其器，趁手的工具会使我们开发事半功倍。市面上的编辑器我用过许多，编辑器使用经历Notepad++，（开源）这个应该是最轻量级的吧，查看代码还好，编辑代码就算了官网地址：https://notepad-plus-plus.org/Brackets，（开源）这个也不错，github-star：30k了，上次发布版本是6月..._vscode nextick
随便推点
西部数码mysql怎么用织梦_[原创]织梦程序(DeDeCms)常见问题集锦-程序员宅基地
文章浏览阅读95次。前言：织梦程序是最知名的cms程序，使用广泛,但很多朋友对织梦还不太熟悉,通过工单分析得知,经常容易出现本文中的问题,本次统一整理出来,希望对新手朋友有帮助,本文写的非常详细,请仔细阅读,一、描述：“dedecms错误警告：连接数据库失败，可能数据库密码不对或数据库服务器出错”如图：分析：用织梦程序制作的站点做迁移服务器后容易出现这个问题,原因是程序中设置的数据库连接信息有误连接不到数据库,解决方..._西部数码支不支持织梦的程序
免安装mysql启动3534错误处理_mysql 免安装版本启动时 3534出错_mysql-程序员宅基地
文章浏览阅读295次。上午在win7下安装MYSQL,只到“net start mysql”这一步报错:3534的错误：于是在百度中搜索关键字“mysql服务无法启动3534”。参考以下两个链接中的方法，解决了3534启动失败的问题：mysql服务无法启动3534错误。http://jingyan.baidu.com/article/219f4bf7e978fcde442d38a9.htmlhttp://blog.cs..._免安装mysql启动失败
评测了10款画流程图软件，这4款最好用！（完全免费）_好用的流程图软件免费-程序员宅基地
文章浏览阅读5.1w次，点赞58次，收藏295次。最近在做项目和复习的时候，用了不少流程图软件给我帮了大忙，所以今天就来分享分享你在网上搜索一下流程图软件，能找到很多很多：但这些软件多数并不是专门绘制流程图的软件，它可能是一些思维导图软件、或者说一些产品交互原型图软件，使用时或多或少有些麻烦。而且，普遍这些软件缺点也很多，比如：只有在线版：ProcessOn（https://www.processon.com）导出功能收费：迅捷流程图软件体积庞大：VISIO就没有一款简单易用、绿色免费的流程图软件吗？阿虚花了不少时间，挨着_好用的流程图软件免费
在CentOS6.9安装Azkaban3.50.0_centos6.9 azkaban-程序员宅基地
文章浏览阅读1.4k次。cd /data/install_pkgwget https://github.com/azkaban/azkaban/archive/3.50.0.tar.gztar -zxvf 3.50.0.tar.gzvi /data/install_pkg/azkaban-3.50.0/azkaban-common/src/main/java/azkaban/utils/EmailMessage..._centos6.9 azkaban
Java项目基于ssm+vue.js的学生宿舍维修服务平台附带文章和源代码设计说明文档ppt-程序员宅基地
文章浏览阅读586次，点赞23次，收藏30次。博主介绍：CSDN特邀作者、985计算机专业毕业、某互联网大厂高级全栈开发程序员、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简历修改。精彩专栏 推荐订阅2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐。
ultralytics的YOLOv8改为自用版本_from ultralytics.utils.plotting import annotator, -程序员宅基地
文章浏览阅读944次。由于需要用pyqt给yolov8做一个界面，而ultralytics一层嵌一层，不是很好用，所以对它的这个源码进行精简，具体代码我放到了这里，ultralytics使用的版本是8.0.54。具体代码如下，需要根据自己的情况来修改data的配置文件以及权值文件，在代码的49和50行。_from ultralytics.utils.plotting import annotator, colors, save_one_box modul