手机移动端首页广告栏滚动图片

swiper.js，方便，功能强大，好多大站都是用。教程简单
https://www.swiper.com.cn/

以下代码仅供参考，适用于不想引用代码库，想要简单实现移动端苹果试玩无缝滑动的同学

style.
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
.clearfix:before,
.clearfix:after {
content: “”;
display: table;
visibility: hidden;
height: 0;
clear: both;
}
.box {
height: 50vh;
width: 100vw;
background: #999;
text-align: center;
border-left: 1px solid red;
}
.wrpa-w {
padding-top: 0 !important;
}
.banner {
width: 100%;
position: relative;
overflow: hidden;
z-index: 5;
}
.banner .container {
width: 1000%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.banner .container li {
width: 10%;
float: left;
}
.banner .point {
position: absolute;
height: 6px;
left: 40%;
bottom: 5px;
}
.banner .point li {
float: left;
width: 5px;
height: 5px;
background: silver;
margin-right: 10px;
border-radius: 2px;
}
.banner .point li:last-child {
margin-right: 0;
}
.active {
background: white !important;
}

boy

<div class="banner"><ul class="clearfix container"><li><div class="box">过渡的555</div></li><li><div class="box">1111</div></li><li><div class="box">2222</div></li><li><div class="box">3333</div></li><li><div class="box">444</div></li><li><div class="box">555</div></li><li><div class="box">过渡的1111</div></li></ul><!-- 对应的点是实际图片的个数 --><ul class="point"><li></li><li></li><li></li><li></li><li></li></ul>
</div>

js
// 页面首次加载
window.onload = function () {
swipwerTransition();
};
//滑动结束
transitionEnd = function (dom, callback) {
if (dom && typeof dom == ‘object’) {
dom.addEventListener(‘webkitTransitionEnd’, function () {
callback && callback();
});
dom.addEventListener(‘transitionEnd’, function () {
callback && callback();
});
}
};
// 初始化方法
function swipwerTransition() {
var banner = document.querySelector(’.banner’);
var width = banner.offsetWidth;
var imageBox = banner.querySelector(’.container’);
var pointBox = banner.querySelector(’.point’);
var points = pointBox.querySelectorAll(‘li’);
var index = 1; //初始化图片角标
points[index - 1].className = ‘active’; //点对应位置
var imgLength = points.length; //轮播图个数（打点个数）

    //无缝滚动transitionEnd(imageBox, function () {if (index > imgLength) {index = 1;removeTransition();translateX(-index * width);} else if (index <= 0) {index = imgLength;removeTransition();translateX(-index * width);}setPoint();})// 点对应图片var setPoint = function () {for (var i = 0; i < points.length; i++) {points[i].className = "";}//判断索引 动画结束后设置点points[index - 1].className = 'active';}// 图片滑动实现var startX = 0;     //开始坐标var moveX = 0;      //移动时x的坐标var distancex = 0;  //移动距离var isMove = false; //是否滑动过imageBox.addEventListener('touchstart', function (e) {startX = e.touches[0].clientX;});imageBox.addEventListener('touchmove', function (e) {isMove = true;moveX = e.touches[0].clientX;distancex = moveX - startX;removeTransition();translateX(-index * width + distancex);});//滑动图片逻辑处理（超过1/3换图，可以自己设置）imageBox.addEventListener('touchend', function (e) {if (Math.abs(distancex) > (width / 3) && isMove) {if (distancex > 0) {index--;} else {index++;}addTransition();translateX(-index * width);} else {addTransition();translateX(-index * width);}isMove = false;startX = 0;moveX = 0;distancex = 0;})/*公用方法*///添加过渡var addTransition = function () {imageBox.style.webkitTransition = 'all .3s ';imageBox.style.transition = "all .3s";}//删除过渡var removeTransition = function () {imageBox.style.webkitTransition = 'none';imageBox.style.transition = "none";}// 设置定位var translateX = function (x) {imageBox.style.webkitTransform = 'translateX(' + x + 'px)';imageBox.style.transform = 'translateX(' + x + 'px)';}
}

手机移动端首页广告栏滚动图片相关推荐

微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
今天突然发现，微信小程序手机访问正常，PC端访问小程序图片无法加载？
今天突然发现,微信小程序手机访问正常,PC端访问小程序图片无法加载? 所有图片在pc上查看都无法显示. 然后使用抓包工具抓包,pc端图片全部403,结果为 AccessDenied You are d ...
PHPCMS V9手机移动端（支持单图和多图）图片上传，（PHPCMS V9前台使用layui的上传组件代替默认的SWFupload上传图片）
默认phpcms的上传图片使用的是swfupload,导致手机移动端上传图片无法使用.这里我们使用layui的上传组件来使其支持手机移动端(支持单图和多图)图片上传,效果图如下: 实现步骤: 一 ...
Android端h5不能选择图片,weui公众号开发h5部分手机不能选择图片及拍照问题
在使用weui采用h5进行公众号开发时,input file选择图片控件,在部分安卓手机不能拍照.不能选择图片. 经过创软公众号开发团队分析,将input代码设置如下方式即可选择图片或者拍摄图片,成功 ...
移动端+京东移动端首页制作
一:移动端的viewport 手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题 ...
织梦dedecms响应式精密机械模具公司网站模板(自适应手机移动端)
模板介绍: 织梦最新内核开发的模板,该模板属于企业通用.精密仪器.模具类企业都可使用, 这款模板使用范围极广,不仅仅局限于一类型的企业,你只需要把图片和产品内容: 换成你的,颜色都可以修改,改完让你耳 ...
京东移动端首页案例
1.上次我们说过京东移动端的首页是通过单独制作的. 所以我们采取单独制作移动页面的方案 2.布局采用流式布局静态.自适应.流式.响应式的特点点击直达. 设置视口标签:<meta name= ...
459~486（rem+媒体查询+Less+苏宁易购移动端首页）
1 rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-si ...
前端学习之携程网移动端首页制作
今天做一个静态移动端携程网首页,如下图: 目录 1.准备工作 2.搜索模块制作 3.焦点图模块制作 4.local-nav小导航栏制作 5.nav大导航栏制作 6.subnav-entry制作 7.热 ...

手机移动端首页广告栏滚动图片

手机移动端首页广告栏滚动图片相关推荐

最新文章

热门文章