欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现移动端轮播图

程序员文章站 2022-03-13 17:03:17
本文实例为大家分享了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" rel="external nofollow" >
  <link rel="stylesheet" href="./css/base.css" rel="external nofollow" >
  <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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l1.jpg" alt="" /> </a>
         </li>
         <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l2.jpg" alt="" /> </a>
         </li>
         <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l3.jpg" alt="" /> </a>
         </li>
         <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l4.jpg" alt="" /> </a>
         </li>
         <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l5.jpg" alt="" /> </a>
         </li>
         <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l6.jpg" alt="" /> </a>
         </li>
         <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="./uploads/l7.jpg" alt="" /> </a>
         </li>
         <li>
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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");
   }
   

}

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