js实现移动端轮播图
网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要为大家详细介绍了js实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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: #c;
}
/ 轮播图部分 /
.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 #c;
}
/2.添加新的样式/
.f_left{
float: left;
}
.f_right{
float: right;
}
.m_left10{
margin-left: 10px;
}
.m_right10{
margin-right: 10px;
}
.m_10{
margin-: 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=countbannerWidth+"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=countbannerWidth+"px";
for(var i = 0; i < lis.length;i++){
lis[i].style.width=bannerWidth+"px";
}
imgBox.style.left=-indexbannerWidth+"px";
}
//自动轮播
var timerId;
var strtime=function(){
timerId=setInterval(function(){
index++;
//添加过度效果
imgBox.style.transition="left 0.5s ease-in-out"
//设置偏移量
imgBox.style.left=(-indexbannerWidth)+"px";
setTimeout(function(){
//当走到一张时候,我就让他等于一张
if(index==count-1){
index=1;
// 清除过度效果
imgBox.style.transition="none";
/偏移到指定的位置/
imgBox.style.left=(-indexbannerWidth)+"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=(-indexbannerWidth + 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=-indexbannerWidth+"px";
}else if(Math.abs(distanceX) > 0){//回弹效果
//过度效果
imgBox.style.transition="left 0.5s ease-in-out";
//偏移位置
imgBox.style.left=-indexbannerWidth+"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=-indexbannerWidth+"px";
}else if(index==0){
index=count-2;
imgBox.style.transition="none";
imgBox.style.left=-indexbannerWidth+"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");
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程