<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
<style type="text/css">
.swiper-container{
width: 600px;
height: 300px;
margin: 0 auto;
border:1px solid #ccc
}
.h1{
background: skyblue;
transition: all 2s;
}
.h2{
background: pink;
transform: translate(-300px,0);
opacity: 0;
}
.h2huaru{
animation: huaru 3s;
} @keyframes huaru{
from{transform: translate(-300px,0);opacity: 0;}
to{transform: translate(0,0);opacity: 1;}
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">
<h1 class="h1">slide 2</h1>
<h2 class="h2">这是1个划入动画</h2>
</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
var selector = '.swiper-container'
var config = {
direction:'horizontal',
loop: true,
autoplay:true, // 如果需要分页器
pagination: {
el: '.swiper-pagination',
}, // 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}, // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
on:{
slideChange:function(){
// console.log(this)
if(this.activeIndex == 2){
$('h1').css({
background:'pink'
})
$('.h2').addClass('h2huaru')
}
}
}
}
var mySwiper = new Swiper (selector,config)
</script>
</body>
</html>

swiper轮播的更多相关文章

  1. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  2. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  3. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  4. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  5. swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  6. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  7. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  8. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  9. Swiper轮播手动后不动

    最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...

  10. 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

    Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...

随机推荐

  1. Scrapy项目 - 项目源码 - 实现腾讯网站社会招聘信息爬取的爬虫设计

    1.tencentSpider.py # -*- coding: utf-8 -*- import scrapy from Tencent.items import TencentItem #创建爬虫 ...

  2. ol/ul/dl的区别

    一.无序列表-ul(unorder list)  1.语法                     <ul></ul>->Unorder List             ...

  3. CSS div仿table样式

    要想让div元素显示的样式与table相同,那么需要使用display属性,这个属性将告诉浏览器这些数据是制表的,将以哪种样式来渲染数据: // table --使该元素按table样式渲染 // t ...

  4. node学习笔记(一)本地文件目录查看器

    Node.js 新闻 nw.js 前端开发桌面应用 内容 node.js实战 照例提供百度云链接,本来以为是实战系列的那本,但不是,不过这本也不错 链接:https://pan.baidu.com/s ...

  5. Maven中jar包冲突的解决方式

    现象 创建一个maven工程,引入spring-context包. <dependency> <groupId>org.springframework</groupId& ...

  6. MySql5.5安装步骤及MySql_Front视图配置

    一.下载文件 有需要的朋友,请自行到百度云下载 链接:https://pan.baidu.com/s/13Cf1VohMz_a0czBI05UqJg 提取码:cmyq 二.安装MySql 2.1.运行 ...

  7. linux下修改python版本号

    修改python版本 1.查看已安装版本: /home/user$ whereis python 2.在其 home 目录下创建一个 alias(别名) user@ubuntu:/home/user$ ...

  8. Android Studio 优秀插件: Parcelable Code Generator

    这里假设我们已经会使用 Parcelable 序列化一个对象了~~ 那么大家会发现 Parcelable 使用起来有些复杂,因为我们要自己复写 几个方法,而且当类的属性比较多的时候,我们就会难受了,又 ...

  9. Android 世界中,谁喊醒了 Zygote ?

    本文基于 Android 9.0 , 代码仓库地址 : android_9.0.0_r45 文中源码链接: SystemServer.java ActivityManagerService.java ...

  10. 网页布局——grid弹性网格布局

    网格布局(Grid)是最强大的 CSS 布局方案. Flexbox 是为一维布局设计的,而 Grid 是为二维布局设计. grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它 ...