最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换;
鼠标移开头像图片,图片变回原来的大小
注:
下图是我根据上面需求已经实现的效果,所以截图方便说明
然后我就想偷懒,直接去网上搜一个这样的效果,但搜了很久也没搜到,并且也不知道这个效果叫什么名字
后来仔细想想,这跟轮播不是很相似吗?只是把切换的小圆点和左右箭头换成了图片而已
以前偶然看到过某网站有类似的效果,我想应该也是用轮播改的,
然后就想到结合用swiper轮播插件来实现这个效果
注:
如果是在PC端上使用,并且要兼容i8及以上,要使用swiper2.0,swiper3.0开始就不支持PC端了
之前写过一篇博客简单介绍了各版本间的区别:
https://www.cnblogs.com/tu-0718/p/9880272.html
在其它主流浏览器上都没有问题,但是在ie上,轮播图片和用来触发轮播切换的头像图片都无法显示,如下图
另我费解的是,我以为ie8才有这个问题,结果ie11也是这样。于是做了以下尝试
①:检查图片路径是否正确
②:检查引用的css,js路径是否正确
③:检查代码是否有编写错误,比如单词拼写错误
④:把CDN引用换成本地css,和js(我之前引用的是CDN,担心是不是ie不支持CDN)
⑤:把引入的 jquery和swiper js文件换成低版本的
⑥:把swiper 2.0官网的示例代码下载下来进行对比
⑦:检查IE浏览器是否是最新版本,有无更新
本以为通过上面的方式能够找到解决方法,然而全部宣告失败(当时我的内心是崩溃的,一万头羊驼狂奔而过)
最后,实在想不出到底是什么原因所致,正在抓狂的我,突然有一个念头一闪而过,
会不会是我这个电脑本身的ie浏览器有问题,后来我回家用自己的台式电脑试了一下,
没有任何问题,i8都能够正常显示,
这下问题迎刃而解(我的天,不带这么坑的啊)
注:
公司的电脑是win10,家里的电脑是win8,我觉得跟系统应该没什么关系
下面附上我的demo,为了方便大家测试,引入的文件都是CDN,只需要把图片和图片路径换一下就行了(业界良心啊23333)
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/2.7.6/idangerous.swiper.min.css" />
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
.device {
position: relative;
width: 640px;
height: 300px;
padding: 30px 80px;
border-radius: 20px;
background: #111;
border: 3px solid white;
margin: 5px auto;
box-shadow: 0px 0px 5px #000;
.device .arrow-left {
background: url(img/arrows.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
.device .arrow-right {
background: url(img/arrows.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
.swiper-container {
height: 300px;
width: 640px;
.content-slide {
padding: 20px;
color: #fff;
.title {
font-size: 24px;
margin-bottom: 10px;
.pagination {
position: absolute;
left: 0;
text-align: center;
bottom: -250px;
z-index: 999;
width: 100%;
.pagination img {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 20px;
.pagination-mouseover {
-webkit-transform: scale(1.5);
-webkit-transition: .5s;
-moz-transform: scale(1.5);
-moz-transition: .5s;
-ms-transform: scale(1.5);
-ms-transition: .5s;
transform: scale(1.5);
transition: .5s;
.pagination-mouseout {
-webkit-transform: scale(1);
-webkit-transition: .5s;
-moz-transform: scale(1);
-moz-transition: .5s;
-ms-transform: scale(1);
-ms-transition: .5s;
transform: scale(1);
transition: .5s;
</style>
</head>
<div class="device">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
<div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with CSS</p>
<p>You can put any CSS inside of slide with any layout, not only images, even another Swiper!</p>
</div>
</div>
</div>
</div>
<div class="pagination">
<img src="img/1.png" />
<img src="img/2.png" />
<img src="img/3.png" />
<img src="img/4.png" />
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/Swiper/2.7.6/idangerous.swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
loop: true, // 开启无缝滚动
grabCursor: true, // 鼠标覆盖Swiper时指针会变成抓手形状
paginationClickable: true
// 左右箭头切换
$('.arrow-left').on('click', function(e) {
e.preventDefault();
mySwiper.swipeNext();
$('.arrow-right').on('click', function(e) {
e.preventDefault();
mySwiper.swipePrev();
// 鼠标移入移出
$('.pagination img').on('mouseover', function(e) {
$('.pagination img').removeClass('pagination-mouseover');
$(this).addClass('pagination-mouseover');
mySwiper.swipeNext();
//$('.pagination img').css({"transform":"scale(1.5)","transition":"1s"});
$('.pagination img').on('mouseout', function(e) {
$('.pagination img').removeClass('pagination-mouseout');
$(this).addClass('pagination-mouseout');
//$('.pagination img').css({"transform":"scale(1.5)","transition":"1s"});
</script>
</body>
</html>
有需要的朋友可以
领取支付宝到店红包
,能省一点是一点