js实现移动端轮播图


Posted in Javascript onDecember 21, 2020

本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下

这是结构

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./css/jd_phnoe.css" >
 <link rel="stylesheet" href="./css/base.css" >
 <title>Document</title>
 
 <script src="./js/jd_phnoe.js"></script>
</head>
<body>
 <div class="jd_layout">
 <div class="jd_banner">
 <ul class="jd_bannerimg clearfix">
 <li>
 <a href="javascript:;" ><img src="./uploads/l1.jpg" alt="" /> </a>
 </li>
 <li>
 <a href="javascript:;" ><img src="./uploads/l2.jpg" alt="" /> </a>
 </li>
 <li>
 <a href="javascript:;" ><img src="./uploads/l3.jpg" alt="" /> </a>
 </li>
 <li>
 <a href="javascript:;" ><img src="./uploads/l4.jpg" alt="" /> </a>
 </li>
 <li>
 <a href="javascript:;" ><img src="./uploads/l5.jpg" alt="" /> </a>
 </li>
 <li>
 <a href="javascript:;" ><img src="./uploads/l6.jpg" alt="" /> </a>
 </li>
 <li>
 <a href="javascript:;" ><img src="./uploads/l7.jpg" alt="" /> </a>
 </li>
 <li>
 <a href="javascript:;" ><img src="./uploads/l8.jpg" alt="" /> </a>
 </li>
 </ul>
 <!-- 点标记 -->
 <ul class="jd_bannerIndicator clearfix">
 <li></li>
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 </div>
</body>
</html>

这是CSS

/* 搜索部分 */
.jd_layout{
 width: 100%;
 max-width: 640px;
 min-width: 320px;
 height: auto;
 margin: 0px auto;
 background-color: #ccc;
}

/* 轮播图部分 */
.jd_banner{
 width: 100%;
 overflow: hidden;
 position: relative;
}
.jd_bannerimg{
 width: 1000%;
 position: relative;
}
.jd_bannerimg > li{
 width: 10%;
 float: left; 
}
.jd_bannerimg>li img{
 width: 100%;
 /*1.设置为块元素
 2.可以将文本的字体大小设置为0
 3.vertical-align:bottom*/
 display: block;
}
/* 点标记 */
.jd_bannerIndicator{
 position: absolute;
 left: 50%;
 bottom: 5px;
 transform: translateX(-50%);
}
.jd_bannerIndicator li{
 width: 6px;
 height: 6px;
 float: left;
 border: 1px solid #fff;
 border-radius: 50%;
 /* opacity: 0.7; */
 margin: 0 3px;
 /* cursor: pointer; */
}
.jd_bannerIndicator li:first-of-type{
 margin-left: 0px;
}
.jd_bannerIndicator >li.active{
 background-color: #fff;
}

dase

/*公共样式*/

/*1.样式重置*/
html,body,ul,li,img,a,p,div,form,input,h3{
 padding: 0;
 margin: 0;
 /*设置盒模型*/
 box-sizing: border-box;
 /*去除移动端特有的点击高亮效果*/
 -webkit-tap-highlight-color: transparent;
}
body{
 font-family: "微软雅黑",sans-serif;
 font-size: 13px;
}
a,
a:hover{
 color: #666;
 text-decoration: none;
}
ul{
 list-style: none;
}
input{
 /*1.清除文本框获取焦点时默认的边框阴影*/
 outline: none;
 /*2.去除边框*/
 border: none;
 /*3.添加边框*/
 border: 1px solid #ccc;
}

/*2.添加新的样式*/
.f_left{
 float: left;
}
.f_right{
 float: right;
}
.m_left10{
 margin-left: 10px;
}
.m_right10{
 margin-right: 10px;
}
.m_top10{
 margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
 content: "";
 display: block;
 height: 0;
 line-height: 0px;
 clear: both;
 visibility: hidden;
}

js

window.onload = function () {
 banner();
}

//轮播图
function banner(){
 /*1.设置修改轮播图的页面结构
 * a.在开始位置添加原始的最后一张图片
 * b.在结束位置添加原始的第一张图片*/
 /*1.1.获取轮播图结构*/
 var banner=document.querySelector(".jd_banner");
 /*1.2.获取图片容器*/
 var imgBox=banner.querySelector("ul:first-of-type");
 //1.3 获取第一张图片
 var first=imgBox.querySelector("li:first-of-type");
 //1.4获取最后一张图
 var last=imgBox.querySelector("li:last-of-type");
 // console.log(first);
 // console.log(last);
 //克隆添加图片
 /*1.5.在首尾插入两张图片 cloneNode:复制一个dom元素*/
 imgBox.appendChild(first.cloneNode(true));
 /*1.6insertBefore(需要插入的dom元素,位置)*/
 imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
 //获取对应的样式
 //2.1获取li的位置
 var lis=imgBox.querySelectorAll("li");
 /*2.2 获取li元素的数量*/
 var count=lis.length;
 /*2.3.获取banner的宽度*/
 var bannerWidth=banner.offsetWidth;
 /*2.4 设置图片盒子的宽度*/
 imgBox.style.width=count*bannerWidth+"px";
 /*2.5 设置每一个li(图片)元素的宽度*/
 for(var i=0; i < lis.length;i++){
 lis[i].style.width=bannerWidth+"px";
 }
 /*定义图片索引:图片已经有一个宽度的默认偏移*/
 var index=1;
 /*3.设置默认的偏移*/
 imgBox.style.left=-bannerWidth+"px";
 /*4.当屏幕变化的时候,重新计算宽度*/
 window.onresize=function(){
 bannerWidth=banner.offsetWidth+"px";
 imgBox.style.width=count*bannerWidth+"px";
 for(var i = 0; i < lis.length;i++){
 lis[i].style.width=bannerWidth+"px";
 }
 imgBox.style.left=-index*bannerWidth+"px";
 }
 //自动轮播
 var timerId;
 var strtime=function(){
 timerId=setInterval(function(){
 index++;
 //添加过度效果
 imgBox.style.transition="left 0.5s ease-in-out"
 //设置偏移量
 imgBox.style.left=(-index*bannerWidth)+"px";
 setTimeout(function(){
 //当走到最后一张时候,我就让他等于最后一张
 if(index==count-1){
 index=1;
 // 清除过度效果
 imgBox.style.transition="none";
 /*偏移到指定的位置*/
 imgBox.style.left=(-index*bannerWidth)+"px";
 }
 },500)
 },1500)
 }
 //自动播放调用
 strtime();
 //实现手动轮播
 var startX,moveX,distanceX;
 /*为图片添加触摸事件--触摸开始*/ 
 var isEnd = true; 
 imgBox.addEventListener("touchstart",function(e){
 //停止定时器
 clearInterval(timerId);
 //console.log(e);
 startX=e.targetTouches[0].clientX; 
 });
 //为图片添加触摸过程,滑动图片
 imgBox.addEventListener("touchmove",function(e){
 if(isEnd==true){
 //console.log(123);
 
 /*记录手指在滑动过程中的位置*/
 moveX=e.targetTouches[0].clientX;
 /*计算坐标的差异*/
 distanceX=moveX-startX;
 //清除过度效果
 imgBox.style.transition="none";
 //基于之前轮播图偏移的位置
 imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
 }
 })
 /*添加触摸结束事件*/
 imgBox.addEventListener("touchend",function(e){
 //获取滑动距离,判断是否超过100px
 isEnd=false;
 if(Math.abs(distanceX) > 50){
 //判断滑动方向
 if(distanceX > 0){//上一张
 index--;
 }else{//下一张
 index++;
 }
 //过度效果
 imgBox.style.transition="left 0.5s ease-in-out";
 //偏移位置
 imgBox.style.left=-index*bannerWidth+"px";
 }else if(Math.abs(distanceX) > 0){//回弹效果
 //过度效果
 imgBox.style.transition="left 0.5s ease-in-out";
 //偏移位置
 imgBox.style.left=-index*bannerWidth+"px";
 }
 /*将上一次move所产生的数据重置为0*/
 startX=0;
 moveX=0;
 distanceX=0;
 
 });
 /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕,当一个元素的过渡效果执行完毕的时候,会触发这个事件*/
 imgBox.addEventListener("webkitTransitionEnd",function(){
 console.log(index,33333);
 
 /*如果到了最后一张(count-1),回到索引1*/
 /*如果到了第一张(0),回到索引count-2*/
 if(index==count-1){
 index=1;
 imgBox.style.transition="none";
 imgBox.style.left=-index*bannerWidth+"px";
 }else if(index==0){
 index=count-2;
 imgBox.style.transition="none";
 imgBox.style.left=-index*bannerWidth+"px";
 }
 yuandian(index);
 setTimeout(function () {
 isEnd=true;
 clearInterval(timerId);
 strtime();
 },100)
 });

 // //圆点排他
 var yuandian=function (index) {
 //先找到所有的li 进行遍历移除所有样式,为自己加上样式
 var lis=banner.querySelector("ul:last-of-type").querySelectorAll("li");
 for(var i = 0; i < lis.length; i++){
 lis[i].classList.remove("active");
 }
 lis[index-1].classList.add("active");
 }
 

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
shiro授权的实现原理
Sep 21 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 #Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 #Javascript
Echart折线图手柄触发事件示例详解
Dec 16 #Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 #Javascript
antd Upload 文件上传的示例代码
Dec 14 #Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 #Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 #Javascript
You might like
PHP个人网站架设连环讲(一)
2006/10/09 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
简单实现js浮动框
2016/12/13 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
Vue中计算属性computed的示例解读
2017/07/26 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
金属材料工程个人求职的自我评价
2013/12/04 职场文书
个人自我鉴定总结
2014/03/25 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python