web H5 首页引导图

1 篇文章 0 订阅

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

 

<!-- <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 JS

var 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>

 

演示效果:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值