web H5 首页引导图

最新推荐文章于 2024-07-11 21:22:49 发布

火星第一帅

最新推荐文章于 2024-07-11 21:22:49 发布

阅读量1.8k

点赞数

分类专栏： js HTML 文章标签： HTML

本文链接：https://blog.csdn.net/KungLun/article/details/91361705

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML

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>

演示效果：