|
导读网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立... 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。 本篇文章给大家带来的内容是关于移动端轮播图实现方法（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。本文介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。最后会放上源码。 HTML部分 <div class="outer" id="oneTest">
<div class="inner">
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(1.jpg)"></div>
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(2.jpg)"></div>
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(3.jpg)"></div>
</div>
<ul class="num"></ul>
</div>轮播图的html就是这样，我们配合着css来看，接下来上css。 Css部分 * {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.outer {
margin: 0 auto;
width: 100%;
height: 150px;
overflow: hidden;
position: relative;
}
.inner {
height: 150px;
overflow: hidden;
width: 8000px;
}
.inner .goIndex {
float: left;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.num {
position: absolute;
left: 0;
right: 0;
bottom: 20%;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}
.num li {
margin: 0 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, .2);
}
.num li.select {
background: rgba(0, 0, 0, .7);
}我们通过css可以看到，.outer为最外层的壳，超出的部分都会隐藏，.inner为一个很长很长的容器，而item为单个item。结构比较简单。ul就是小的控制点了，但移动端没有点击小点的功能。 页面中Js部分 //function dGun(obj = {}) 这是dGun.js的主函数
// 初始化两个图片轮播
dGun({id:"oneTest",time:10000});
dGun({id:"twoTest",time:4000});
// 点击后跳转
var goList = document.getElementsByClassName("goIndex");
for (var i = 0; i < goList.length; i++) {
goList[i].addEventListener("click", function () {
window.location = this.getAttribute("goUrl")
})
}dGun()就是初始化轮播图我们需要传入参数，第一个参数id为.outer盒子的id，第二个为自动切换时间。下面的是简单的点击跳转功能。 dGun.js 初始化部分 //function dGun(obj = {}) 包裹全部dGun内代码
var id = obj.id; //获取domid
var time = obj.time ? parseInt(obj.time) : 3000; //默认3s
time = time > 300 ? time : 1000; //间隔必须大于300
var _width = document.querySelector("#"+id).offsetWidth; //获取轮播图宽度
var _index = 0; //当前是第几个轮播 从-1开始
var inner = document.querySelector("#"+id+" .inner"); //获取轮播内容外壳（很长的那个）
var items = document.querySelectorAll("#"+id+" .item"); //获取轮播元素
// 将第一个元素复制到最后，将最后的元素复制到开头
var firstItem = items[0];
var lastItem = items[items.length-1];
inner.insertBefore(lastItem.cloneNode(true),firstItem);
inner.appendChild(firstItem.cloneNode(true));
inner.style.transform = "translateX(-"+_width+"px)";
// 生成底部小圆点
var imgLength = document.querySelector("#"+id+" .inner").children.length-2;
var makeCir = '<li class="select"></li>';
for (var i = 0; i < imgLength - 1; i++) {
makeCir += '<li></li>';
}
document.querySelector("#"+id+" .num" ).innerHTML = makeCir;
//设置轮播的宽度。
var newItems = document.querySelectorAll("#"+id+" .item");
for(var i = 0; i<newItems.length;i++){
newItems[i].style.width = _width+"px";
}前几行代码就不多介绍了，就是获取dom，获取宽度。 手势滑动实现 var startX = 0, changedX = 0, originX = 0, basKey = 0;
//手指点击的X位置 滑动改变X的位置 inner的translateX的值 basKey是个钥匙
function Broadcast() {
var that = this;
this.box = document.querySelector("#"+id+" .inner");
this.box.addEventListener("touchstart", function (ev) {
that.fnStart(ev);
})
}
// 轮播手指按下
Broadcast.prototype.fnStart = function (ev) {
clearInterval(autoPlay); //手指按下的时候清除定时轮播
if (!basKey) {
var that = this;
startX = ev.targetTouches[0].clientX;
var tempArr = window.getComputedStyle(inner).transform.split(",");
//获取当前偏移量
if (tempArr.length > 2) {
originX = parseInt(tempArr[tempArr.length - 2]) || 0;
}
this.box.ontouchmove = function (ev) {
that.fnMove(ev)
}
this.box.ontouchend = function (ev) {
that.fnEnd(ev)
}
}
};
// 轮播手指移动
Broadcast.prototype.fnMove = function (ev) {
ev.preventDefault();
changedX = ev.touches[0].clientX - startX;
var changNum = (originX + changedX);
this.box.style.cssText = "transform: translateX(" + changNum + "px);";
};
// 轮播手指抬起
Broadcast.prototype.fnEnd = function (ev) {
// 移除底部按钮样式
document.querySelector("#"+id+" .select").classList.remove("select");
basKey = 1;
setTimeout(function () {
basKey = 0;
}, 300)
if (changedX >= 100) { //向某一方向滑动
var _end = (originX + _width);
this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index--;
if (_index == -1) { //滑动到第一个了，为了实现无缝隙，滚到最后去
document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
play(-1);
}
} else if (changedX < -100) { //向负的某一方向滑动
var _end = (originX - _width);
this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index++;
if (_index == imgLength) { //滑到最后一个了，为了实现无缝隙，滚到前面去
play(imgLength);
document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
}
} else { //滑动距离太短，没吃饭不用管
this.box.style.cssText = "transform: translateX(" + originX + "px);transition:all .3s";
}
// 完成一次滑动初始化值
startX = 0;
changedX = 0;
originX = 0;
if (_index != -1 && _index != imgLength) {
document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
}
this.box.ontouchmove = null; //清除事件
this.box.ontouchend = null; //清除绑定事件
autoPlay = setInterval(lunbo, time) //开启轮播
}我们定义Broadcast方法监听用户的触屏按下事件 play函数，快速滚 //首尾无缝连接
function play(index) {
setTimeout(function () {
inner.style.transition = 'all 0s';
if (index == -1) {
var _number = -imgLength * _width;
inner.style.transform = 'translateX(' + _number + 'px)';
_index = imgLength - 1;
} else if (index == imgLength) {
inner.style.transform = 'translateX(-' + _width + 'px)';
_index = 0;
}
}, 250);
}原理就是在图片滑动完成的时候，快速设置滑动变化时间设为0，并改变translateX到应该去的位置。 定时切换图片 function lunbo(){
document.querySelector("#"+id+" .select").classList.remove("select");
var tempArr = window.getComputedStyle(inner).transform.split(",");
if (tempArr.length > 2) {
originX = parseInt(tempArr[tempArr.length - 2]) || 0;
}
var _end = (originX - _width);
inner.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index++;
if (_index != -1 && _index != imgLength) {
document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
}else if(_index == -1 ){
document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
} else if (_index == imgLength) {
play(imgLength);
document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
}
}
// 初始化轮播
var autoPlay = setInterval(lunbo,time); //开启轮播
var _Broadcast = new Broadcast(); //实例触摸这个就是开启个定时器，过固定的时间偏移inner的X，并根据是第几个来判断是否要执行play函数。 https://github.com/Zhoujiando... 源码在这里面，大家可以看一下。 以上就是移动端轮播图实现方法（附源码）的详细内容，更多请关注php中文网其它相关文章！ 网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。 |
温馨提示：喜欢本站的话，请收藏一下本站！
本站发布的Win7纯净版系统、Win10纯净版和XP纯净版系统仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！
本站所有资源全部来自于网络资源,如侵犯到您的权益,请及时通知我们(peng896066052@126.com),我们会及时处理.
Copyright © 2018-2020 雨林木风下载站
