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 相关文章推荐
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
微信小程序登录按钮遮罩浮层效果的实现方法
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 实例化类的一点摘记
2008/03/23 PHP
header跳转和include包含问题详解
2012/09/08 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
javascript连续赋值问题
2015/07/08 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
python编写Logistic逻辑回归
2020/12/30 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
学生会副主席竞聘书
2014/03/31 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
大学生个人总结范文
2015/02/15 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫