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>
智能推荐
sparkSql catalyst优化器-程序员宅基地
文章浏览阅读300次。2019独角兽企业重金招聘Python工程师标准>>> ..._sparksql 优化器 估算结果集
习题2-3 求平方与倒数序列的部分和 (15分)-程序员宅基地
文章浏览阅读128次。本题要求对两个正整数m和n（m≤n）编写程序，计算序列和m2 +1/m+(m+1)2 +1/(m+1)+⋯+n2 +1/n。输入格式:输入在一行中给出两个正整数m和n（m≤n），其间以空格分开。输出格式:在一行中按照“sum = S”的格式输出部分和的值S，精确到小数点后六位。题目保证计算结果不超过双精度范围。输入样例:5 10输出样例:sum = 355.845635#include<stdio.h>int main(){ int m,n;_习题2-3 求平方与倒数序列的部分和 (15分)
Loadrunner的IP欺骗（含图）_loadrunner作假图-程序员宅基地
文章浏览阅读1k次。转载出处：http://www.51testing.com/?41972使用loadrunner进行IP欺骗首先要注意以下两点：1、 本地的IP设置不能为“自动获取”，必须指定一个静态IP如果本地是动态获取IP，在运行IP Wizard时会弹出提示：The IP_loadrunner作假图
OpenCV-Python 中文教程_opencv-python中文教程-程序员宅基地
文章浏览阅读2.1k次，点赞8次，收藏37次。OpenCV-Python 中文教程索引目录 I 走进 OpenCV 10详细目录I 走进 OpenCV 101 关于 OpenCV-Python 教程 102 在 在 Windows 上安装 OpenCV-Python 113 在 在 Fedora 上安装 OpenCV-Python 12II OpenCV 中的 Gui 特性 134 图片 134.1 读入图像 . . . . . . . . . . . . . . . . . . . . . . . . . . . . ._opencv-python中文教程
日文半角转全角 java_java将日文半角片假名转成全角的方法-程序员宅基地
文章浏览阅读1.2k次。package samples.string.japanese;public class StringUtil {private static final char[] HANKAKU_KATAKANA = { '｡', '｢', '｣', '､', '･','ｦ', 'ｧ', 'ｨ', 'ｩ', 'ｪ', 'ｫ', 'ｬ', 'ｭ', 'ｮ', 'ｯ', 'ｰ', 'ｱ', 'ｲ','ｳ', '..._半角日文转全角日文 java
【自学指南】Python爬虫的四个水平，你修炼到了哪个层次？_爬虫层级-程序员宅基地
文章浏览阅读1.7k次。【自学指南】Python爬虫的四个水平，你修炼到了哪个层次？_爬虫层级
随便推点
esp32 io速度_Adafruit HUZZAH32-ESP32Feather的说明-程序员宅基地
文章浏览阅读661次。概述是的，是您一直在等待的羽毛！HUZZAH32是我们基于ESP32的Feather，使用官方WROOM32模块制成。我们打包了您喜欢的所有有关Feathers的东西：内置USB到串行转换器，自动引导程序重置，锂离子/聚合物充电器以及所有带出的GPIO，因此您可以将其与我们的FeatherWings一起使用。位于该Feather末尾的模块包含一个双核ESP32芯片，4MB的SPIFlash，调谐的..._.pio/libdeps/featheresp32/adafruit busio/adafruit_spidevice.h:9:10: fatal er
电商购物核心功能测试点_中慧 电子商城功能测试-程序员宅基地
文章浏览阅读1.4w次，点赞28次，收藏229次。这份是根据电商中所涉及的业务点整理出的核心功能测试点，更多的偏向于功能性的测试。其后所涉及到的性能测试、压力测试、集成测试等，会在进一步分析，作为一名产品经理应该了解到这部分知识点。..._中慧 电子商城功能测试
语义网络，语义网，链接数据和知识图谱_语义网 图数据库-程序员宅基地
文章浏览阅读7.1k次。前一篇文章“为什么需要知识图谱？什么是知识图谱？——KG的前世今生”提及了和知识图谱相关的一些早期概念。为了让读者能够更好地区分这些概念，以及更好地在整体上把握知识谱图发展过程，本文将对这些概念作一个更为详细的介绍。一、语义网络（Semantic Network）对于初学者来讲，这个概念很容易和..._语义网 图数据库
scala 之 map 操作史上最全_scala map添加元素-程序员宅基地
文章浏览阅读4.6w次，点赞11次，收藏75次。Map(映射)是一种可迭代的键值对（key/value）结构。所有的值都可以通过键来获取。Map 中的键都是唯一的。Map 也叫哈希表（Hash tables）。Map 有两种类型，可变与不可变，区别在于可变对象可以修改它，而不可变对象不可以。默认情况下 Scala 使用不可变 Map。如果你需要使用可变集合，你需要显式的引入 import scala.collection.mutabl..._scala map添加元素
AI时间线：探索人工智能历史的智能工具-程序员宅基地
文章浏览阅读360次，点赞5次，收藏9次。AI时间线：探索人工智能历史的智能工具项目地址:https://gitcode.com/zhugezifang/ai_timeline项目简介AI时间线 是一个精心设计的在线平台，旨在帮助用户深入理解和探索人工智能领域的历史、发展与里程碑事件。它通过可视化的方式，展示了从早期概念提出到最新技术突破的关键信息，为学者、学生和AI爱好者提供了一个互动的学习资源。技术分析该项目基于Web技术实...
python随机生成列表的五种方法，数据库开发面试自我介绍_用随机函数创建一个列表-程序员宅基地
文章浏览阅读848次，点赞23次，收藏9次。Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！_用随机函数创建一个列表