编程 Javascript

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;
}

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");
 }
 

}

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

js实现移动端轮播图

- Author -

WONGseedling

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

根据分辨率不同，调用不同的css文件

Jul 07 Javascript

取得一定长度的内容，处理中文

Dec 20 Javascript

JQGrid的用法解析(列编辑,添加行,删除行)

Nov 08 Javascript

完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码

Dec 17 Javascript

基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

Feb 22 Javascript

jQuery Tags Input Plugin（添加/删除标签插件）详解

Jun 20 Javascript

Angular2 (RC4) 路由与导航详解

Sep 21 Javascript

JS三目运算(三元运算)方法详解

Mar 01 Javascript

jquery实现左右滑动式轮播图

Mar 02 Javascript

JQuery查找子元素find()和遍历集合each的方法总结

Mar 07 Javascript

iframe与主框架跨域相互访问实现方法

Sep 14 Javascript

react组件从搭建脚手架到在npm发布的步骤实现

Jan 09 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