web H5 首页引导图

向左滑动切换，最后一张图点击进入，进入首页

<!-- <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=354250238,3380034834&fm=15&gp=0.jpg" alt=""> --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>手机滑动轮播图</title><meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,shrink-to-fit=no,user-scalable=no,minimal-ui" name="viewport"></head><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.go-home {right: 20px;top: 20px;position: absolute;z-index: 1;background: rgba(0, 0, 0, 0.3);padding: 3px 14px;border-radius: 4px;color: white;font-size: 12px;cursor: pointer;}#lunbotu {overflow: hidden;visibility: hidden;position: relative;}.swipe-wrap {overflow: hidden;position: relative;}.swipe-wrap>div {float: left;width: 100%;position: relative;}.swipe-wrap img {width: 100%;}.yuandian {right: 10px;bottom: 10px;position: absolute;}.yuandian li {width: 12px;height: 6px;border-radius: 40%;background: #ffffff;float: left;margin-right: 10px;display: none;}.yuandian .cur {background: red;}</style><body><div><div id="lunbotu"><div class="swipe-wrap"><!--此处class的名称是固定的--><div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=354250238,3380034834&fm=15&gp=0.jpg"></div><div><img src="http://gonglve.baidu.com/gonglve/api/getcontent?doc_id=b29e09b2dd36a32d737581b0&type=pic&src=7bc1e934ad7094ac8516d411fb2532e1.GIF"></div><div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=354250238,3380034834&fm=15&gp=0.jpg"></div></div><ul class="yuandian"><li class="cur"></li><li></li><li></li></ul></div><div class="go-home" id="goHome">进入</div></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src='https://cdnjs.cloudflare.com/ajax/libs/swipe/2.0.0/swipe.js'></script><script>$(".go-home").css("display", "none");// pure JSvar elem = document.getElementById('lunbotu');window.mySwipe = Swipe(elem, {// auto: 3000, //每隔3000ms，自动轮播一次// 回调函数表示没做完一个轮播，就执行下面的内容callback: function (index, element) {console.log(index);//在控制台输出index的值if (index == 2) {$(".go-home").css("display", "block");} else {$(".go-home").css("display", "none");}// 让自己的li添加cur类，其他的兄弟li移除cur类，也就是一种排他$(".yuandian li").eq(index).addClass("cur").siblings().removeClass("cur");}});//点击小圆点，图片会有一个slide的效果$('.yuandian li').click(function () {mySwipe.slide($(this).index());});$("#goHome").click(function () {window.location.href = "https://www.baidu.com";});</script></body></html>

演示效果：

图片网上找的，如有侵权，请联系删除

web H5 首页引导图相关推荐

html引导蒙层,web开发中实现图标点击态蒙层
原标题:web开发中实现图标点击态蒙层 webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要 ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
次启动展示引导图功能
现在的安卓应用,如果是第一次安装应用,首次启动,进入应用后都会展示几张功能引导图.下面我们就来封装实现这个常用的功能. 先列一下.我们实现的功能点. 1.用户首次安装应用,启动应用,进入首页时,要显示 ...
android程序启动动画,Android设置软件启动动画（以及初次安装的几张引导图）
Android设置软件启动动画(以及初次安装的几张引导图) 设置软件启动动画 1 创建一个启动Activity 这里叫做QiDongActivity 它的XML中设置一个matchparent的背景图 ...
蒲公英自动更新版本管理以及更新后展示引导图
/** * 获取存储的版本号 * @currentVersion 当前app版本 * 线上版本>当前版本 --跟新APP * 引导图 @version老版本存储的版本<更新的版本,则AP ...
android带动画的饼图,Android部分源码资源共享（视屏转GIF图片工具、仿抖音、仿朋友圈、仿红包、饼状图、引导图，图灵源码等）...
视屏转为gif图片工具: 下载地址:CSDN 下载 1.封装了各项工具类,例如,日志,打印,缓存等,可直接使用项目百度网盘:下载提取码:fq07 2.Android高仿抖音 1.项目的bu ...
使用ros3d.js实现web 端3D建图
使用ros3d.js实现web 端3D建图使用ros3d.js实现web 端3D建图前端资源下载: ros3d地图与小车模型显示-机器学习文档类资源-CSDN下载
* web H5 网页浏览器蓝牙 Bluetooth
文章目录 2022/1/18 更新说明目标介绍背景 Bluetooth Low Energy (BLE) Generic Attribute Profile (GATT) WebBluetoot ...
iOS 引导图的聚光灯效果代码实现
应用背景一般一个app进入一个新的页面,或者有新的功能更新的时候都会有一个新手引导来帮助用户快速了解新功能.而这个引导图一般针对某个功能都有聚光灯效果. 实现方案介绍其中背景色在指定的地方有聚光灯 ...

web H5 首页引导图

web H5 首页引导图相关推荐

最新文章

热门文章