jquery，js实现手机端全屏轮播图

使用了swiper插件，可手动滑动切换也可自动切换

效果图

css代码

只是作为参考，可以根据你自己的需求去改，这里我用的是上下两张背景图，图自行修改

        html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;color: #000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}//兼容浏览器.swiper-slide {text-align: center;background: #fff;position: relative;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide1 {background-image: url(../assets/down_bg_h@3x.png), url(../assets/down_bg_g@3x.png);background-repeat: no-repeat;background-position: bottom, 0 -9rem;background-size: 38rem 34rem, 38rem 82rem, auto auto;}.swiper-slide2 {background-image: url(../assets/down_bg_f@3x.png), url(../assets/down_bg_e@3x.png);background-repeat: no-repeat;background-position: bottom, 0 -13rem;background-size: 38rem 34rem, 38rem 80rem, auto auto;}/* .swiper-slide3 {background-image: url(../assets/down_bg_d@3x.png), url(../assets/down_bg_c@3x.png);background-repeat: no-repeat;background-position: bottom, 0 -6rem;background-size: 38rem 34rem, 38rem 70rem, auto auto;} */.swiper-slide4 {background-image: url(../assets/down_bg_b@3x.png), url(../assets/down_bg_a@3x.png);background-repeat: no-repeat;background-position: bottom, 0 -8rem;background-size: 38rem 34rem, 38rem 80rem, auto auto;}.swiper_img {width: 100%;height: 100%;position: absolute;top: -10rem;z-index: -1;}.juzhong {position: absolute;height: 15.7rem;bottom: 3rem;width: 100%;}.shuru {width: 30.1rem;margin: 0 auto;}.title {width: 8.4rem;height: 2.8rem;margin: 0 auto;color: #fff;font-size: 2rem;line-height: 2.8rem;text-align: center;}.smallTitle {margin-top: 1rem;width: 30.1rem;height: 4.2rem;font-size: 1.5rem;color: #fff;text-align: center;line-height: 2rem;margin-bottom: 1.8rem;}.btn {width: 30.1rem;height: 5.6rem;line-height: 5.6rem;border-radius: 0.8rem;text-align: center;margin: 0 auto;font-size: 1.6rem;color: #FFFFFF;box-shadow: 0 0.6rem 1rem 0 rgba(23, 49, 67, 0.20);position: relative;}.btn1 {background-image: linear-gradient(270deg, #DC4141 0%, #FF7676 100%);}.btn2 {background-image: linear-gradient(270deg, #6F56FF 0%, #996CFF 100%);}/* .btn3 {background-image: linear-gradient(270deg, #82DCFF 0%, #546BEA 100%);} */.btn4 {background-image: linear-gradient(270deg, #82DCFF 0%, #546BEA 100%);}.yema {color: #fff;font-size: 1.2rem;}.arrow {width: 2.8rem;height: 2.2rem;position: absolute;right: 2rem;top: 1.5rem;}

html代码

    <!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide swiper-slide1"><div class="juzhong"><div class="shuru"><div class="smallTitle">自由编辑你的文案</div></div><div class="btn btn1"><span class="wenzi">自由编辑你的文案</span><img class="arrow" src="../images/icons_into@3x.png" alt=""></div></div></div><div class="swiper-slide swiper-slide2"><div class="juzhong"><div class="shuru"><div class="smallTitle">自由编辑你的文案</div></div><div class="btn btn2"><span class="wenzi">自由编辑你的文案</span><img class="arrow" src="../images/icons_into@3x.png" alt=""></div></div></div><div class="swiper-slide swiper-slide4"><div class="juzhong"><div class="shuru"><div class="smallTitle">自由编辑你的文案</div></div><div class="btn btn4"><span class="wenzi">自由编辑你的文案</span><img class="arrow" src="../images/icons_into@3x.png" alt=""></div></div></div></div><!-- Add Pagination --><div class="swiper-pagination yema"></div><!-- Add Arrows --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div>

js代码

 <script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',type: 'fraction',},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});</script>

记住一定要引入这些css和js文件，没有的同学可以点击这里去我的码云上下载，这里就不展示了

<link rel="stylesheet" href="../css/swiper.min.css">
<script src="../js/adaptive.js"></script> <!-- 这个adaptive.js是将px转化为rem来适应手机端的显示 -->
<script src="../js/swiper.min.js"></script>
<script src="../js/jquery.min.js"></script>

代码有些粗糙，有错误请指出

tips：上班比较忙，不定期更新，有需要请留言

希望能帮到需要的人，喜欢的话点一下赞咯( ￣3ε￣ )

jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)相关推荐

jquery导航图片全屏滚动、首页全屏轮播图，各式相册
1.目录结构源码 project css js image index1 index2 index3 index4 index.html index1到index4分为四个iframe标签引入的可单 ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
html背景图片手机端全屏,css 背景图全屏显示，兼容移动端
.login { background: url(img/login.jpg) no-repeat center center; background-size: cover; background- ...
苹果cmsV10添加全屏幻灯图、全屏轮播图教程
使用全屏模板的小伙伴们很多都不会把首页的幻灯图片设置成全屏显示,今天就给大家讲解下幻灯图片全屏的设置教程. 1,设置全屏有2种途径:A是直接上传全屏的图片,B是通过苹果cms系统后台编辑视频的&quo ...
slick.js基于jQuery全屏轮播插件
下载地址基于slick.js轮播插件实现的全屏轮播效果,支持图片和文字动画显示效果. dd:
html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解自动播放+手动播放
轮播图已经成了页面开发中不可缺少的一部分,日常生活中随处都能见到轮播图的身影,例如平常我们购物的淘宝,京东等等,都靠着轮播图在一片有限的区域内展现出更多的商品.这也是前端程序员最早接触到的练手小项目 ...

jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)

jquery，js实现手机端全屏轮播图

使用了swiper插件，可手动滑动切换也可自动切换

css代码

html代码

js代码

记住一定要引入这些css和js文件，没有的同学可以点击这里去我的码云上下载，这里就不展示了

代码有些粗糙，有错误请指出

jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)相关推荐

最新文章

热门文章