以下效果基于better-scroll插件实现
效果演示:横向滚动
源代码:
<div class="wrapper">
<div class="content">
<ul class="ul">
<li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
</li>
<li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
</li>
<li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
</li>
<li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
</li>
<li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
</li>
<li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
</li>
</ul>
</div>
</div>
<script src="../js/libs/bscroll.min.js"></script>
<script>
// 注意:
// 第一:实例化 并且开启横向滚动 scrollX:true
// 第二:获取所有子元素的宽度总和,赋值给内盒子
// 所有子元素
var lis = [...document.querySelectorAll(".content ul li")];
// 一个元素的宽
var liW = lis[0].offsetWidth;
// 把子元素的宽度加起来
var sum = lis.length * liW;
// 把总宽度赋值给父元素(注意,是实例化盒子下的子元素)
document.querySelector(".content").style.width = sum + "px";
// 实例化
var myX = new BScroll(".wrapper", {
// 开启点击事件
click: true,
// 开启横向滚动。默认false,需要打开
scrollX: true
});
</script>
效果演示:楼层效果
源代码:
<div class="wrapper">
<div class="content">
<div class="item">
<h2 id="A">A</h2>
<ul>
<li>阿拉善盟</li>
<li>鞍山</li>
<li>安庆</li>
<li>安顺</li>
<li>阿克苏</li>
</ul>
</div>
<div class="item">
<h2 id="B">B</h2>
<ul>
<li>北京</li>
<li>包头</li>
<li>本溪</li>
<li>巴彦淖尔</li>
<li>白城</li>
</ul>
</div>
<div class="item">
<h2 id="C">C</h2>
<ul>
<li>重庆</li>
<li>成都</li>
<li>常州</li>
<li>长春</li>
<li>承德</li>
</ul>
</div>
<div class="item">
<h2 id="D">D</h2>
<ul>
<li>大连</li>
<li>大庆</li>
<li>大兴安岭</li>
<li>大理</li>
<li>敦煌</li>
</ul>
</div>
</div>
</div>
<!-- 字母列表按钮 -->
<div class="filexd">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<script src="../js/libs/bscroll.min.js"></script>
<script>
// 获取所有的字母列表
var lis = [...document.querySelectorAll(".filexd li")];
// 给字母列表添加点击事件
lis.forEach(function(item){
item.onclick = function(){
// scrollToElement :滚动到指定的目标元素。
myX.scrollToElement(document.getElementById(this.innerHTML),500);
}
})
// 实例化
var myX = new BScroll(".wrapper", {
// 开启点击事件
click: true,
// 开启横向滚动。
scrollX: true
});
</script>
效果演示: 导航吸顶效果
源代码:
<body>
<div class="nav" id="top2">导航条</div>
<div class="container">
<div class="header"></div>
<div class="main">
<div class="inner">
<div class="banner">
广告图
</div>
<div class="nav" id="top1">导航条</div>
<div class="item">
商品列表
</div>
</div>
</div>
<div class="footer"></div>
</div>
<script src="js/libs/flexible.js"></script>
<script src="js/libs/bscroll.min.js"></script>
<script>
let nav = document.querySelector("#top1");
let navFalse = document.querySelector("#top2");
let navTop = nav.offsetTop;
let navH = nav.offsetHeight;
let mybs = new BScroll(".main", {
probeType: 3
})
mybs.on("scroll", () => {
if (mybs.y < 0 && Math.abs(mybs.y) > navTop) {
navFalse.style.display = "block";
} else {
navFalse.style.display = "";
}
})
</script>
</body>
以下效果基于swiper插件实现
效果演示:tab切换 效果
源代码:
引入插件:
<!-- 引入css样式 -->
<link rel="stylesheet" href="css/swiper.css">
<div class="wrapper">
<ul class="tab">
<li class="active">战士</li>
<li>射手</li>
<li>法师</li>
</ul>
<!-- 基本写法 -->
<div class="swiper-container banner">
<div class="swiper-wrapper">
<div class="swiper-slide">战士战士战士战士</div>
<div class="swiper-slide">射手射手射手</div>
<div class="swiper-slide">法师法师法师</div>
</div>
</div>
</div>
<!-- 引入js插件 -->
<script src="js/libs/swiper.min.js"></script>
<script>
// 获取tab按钮
var btns = [...document.querySelectorAll(".tab li")];
// 实例化
var myTab = new Swiper(".banner", {
// 注意:不能使用loop;loop模式下注意该值会被加上复制的slide数。
// loop: true
// on 监听swiper的slide改变
on: {
// slideChange ,当当前slide 发生改变
slideChange: function () {
/*
* previousIndex:返回上一个活动块的索引,切换前的索引。
* activeIndex:返回当前活动块的索引。
*/
// 把按钮对应索引改变高亮(当前增加)
btns[this.activeIndex].classList.add("active");
// (上一个移除)
btns[this.previousIndex].classList.remove("active");
}
}
});
// tab 点击
btns.forEach(function (item, i) {
item.onclick = function () {
// 控制Swiper切换到指定slide。
myTab.slideTo(i, 1000);
}
})
</script>