js实现移动端轮播图

2023-09-02 20:30:04 79

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

这是结构









Document

这是CSS

/*搜索部分*/
.jd_layout{
width:100%;
max-width:640px;
min-width:320px;
height:auto;
margin:0pxauto;
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>liimg{
width:100%;
/*1.设置为块元素
2.可以将文本的字体大小设置为0
3.vertical-align:bottom*/
display:block;
}
/*点标记*/
.jd_bannerIndicator{
position:absolute;
left:50%;
bottom:5px;
transform:translateX(-50%);
}
.jd_bannerIndicatorli{
width:6px;
height:6px;
float:left;
border:1pxsolid#fff;
border-radius:50%;
/*opacity:0.7;*/
margin:03px;
/*cursor:pointer;*/
}
.jd_bannerIndicatorli: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:1pxsolid#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();
}

//轮播图
functionbanner(){
/*1.设置修改轮播图的页面结构
*a.在开始位置添加原始的最后一张图片
*b.在结束位置添加原始的第一张图片*/
/*1.1.获取轮播图结构*/
varbanner=document.querySelector(".jd_banner");
/*1.2.获取图片容器*/
varimgBox=banner.querySelector("ul:first-of-type");
//1.3获取第一张图片
varfirst=imgBox.querySelector("li:first-of-type");
//1.4获取最后一张图
varlast=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的位置
varlis=imgBox.querySelectorAll("li");
/*2.2获取li元素的数量*/
varcount=lis.length;
/*2.3.获取banner的宽度*/
varbannerWidth=banner.offsetWidth;
/*2.4设置图片盒子的宽度*/
imgBox.style.width=count*bannerWidth+"px";
/*2.5设置每一个li(图片)元素的宽度*/
for(vari=0;i50){
//判断滑动方向
if(distanceX>0){//上一张
index--;
}else{//下一张
index++;
}
//过度效果
imgBox.style.transition="left0.5sease-in-out";
//偏移位置
imgBox.style.left=-index*bannerWidth+"px";
}elseif(Math.abs(distanceX)>0){//回弹效果
//过度效果
imgBox.style.transition="left0.5sease-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";
}elseif(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)
});

////圆点排他
varyuandian=function(index){
//先找到所有的li进行遍历移除所有样式,为自己加上样式
varlis=banner.querySelector("ul:last-of-type").querySelectorAll("li");
for(vari=0;i
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

js实现移动端轮播图

热门推荐

随机推荐