关灯
开启左侧

js实现移动端轮播图

[复制链接]
小川 发表于 2018-12-20 11:19:02 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <link rel="stylesheet" href="./css/jd_phnoe.css" rel="external nofollow" >
  8.   <link rel="stylesheet" href="./css/base.css" rel="external nofollow" >
  9.   <title>Document</title>
  10.   
  11.   <script src="./js/jd_phnoe.js"></script>
  12. </head>
  13. <body>
  14.     <div class="jd_layout">
  15.     <div class="jd_banner">
  16.         <ul class="jd_bannerimg clearfix">
  17.          <li>
  18.           <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>
  19.          </li>
  20.          <li>
  21.           <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>
  22.          </li>
  23.          <li>
  24.           <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>
  25.          </li>
  26.          <li>
  27.           <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>
  28.          </li>
  29.          <li>
  30.           <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>
  31.          </li>
  32.          <li>
  33.           <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>
  34.          </li>
  35.          <li>
  36.           <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>
  37.          </li>
  38.          <li>
  39.           <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>
  40.          </li>
  41.         </ul>
  42.         <!-- 点标记 -->
  43.         <ul class="jd_bannerIndicator clearfix">
  44.          <li></li>
  45.          <li class="active"></li>
  46.          <li></li>
  47.          <li></li>
  48.          <li></li>
  49.          <li></li>
  50.          <li></li>
  51.          <li></li>
  52.         </ul>
  53.        </div>
  54.     </div>
  55. </body>
  56. </html>
复制代码
  1. /* 搜索部分 */
  2. .jd_layout{
  3.   width: 100%;
  4.   max-width: 640px;
  5.   min-width: 320px;
  6.   height: auto;
  7.   margin: 0px auto;
  8.   background-color: #ccc;
  9. }

  10. /* 轮播图部分 */
  11. .jd_banner{
  12.   width: 100%;
  13.   overflow: hidden;
  14.   position: relative;
  15. }
  16. .jd_bannerimg{
  17.   width: 1000%;
  18.   position: relative;
  19. }
  20. .jd_bannerimg > li{
  21.   width: 10%;
  22.   float: left;
  23. }
  24. .jd_bannerimg>li img{
  25.   width: 100%;
  26.   /*1.设置为块元素
  27.   2.可以将文本的字体大小设置为0
  28.   3.vertical-align:bottom*/
  29.   display: block;
  30. }
  31. /* 点标记 */
  32. .jd_bannerIndicator{
  33.   position: absolute;
  34.   left: 50%;
  35.   bottom: 5px;
  36.   transform: translateX(-50%);
  37. }
  38. .jd_bannerIndicator li{
  39.   width: 6px;
  40.   height: 6px;
  41.   float: left;
  42.   border: 1px solid #fff;
  43.   border-radius: 50%;
  44.   /* opacity: 0.7; */
  45.   margin: 0 3px;
  46.   /* cursor: pointer; */
  47. }
  48. .jd_bannerIndicator li:first-of-type{
  49.   margin-left: 0px;
  50. }
  51. .jd_bannerIndicator >li.active{
  52.   background-color: #fff;
  53. }
复制代码
  1. /*公共样式*/

  2. /*1.样式重置*/
  3. html,body,ul,li,img,a,p,div,form,input,h3{
  4.   padding: 0;
  5.   margin: 0;
  6.   /*设置盒模型*/
  7.   box-sizing: border-box;
  8.   /*去除移动端特有的点击高亮效果*/
  9.   -webkit-tap-highlight-color: transparent;
  10. }
  11. body{
  12.   font-family: "微软雅黑",sans-serif;
  13.   font-size: 13px;
  14. }
  15. a,
  16. a:hover{
  17.   color: #666;
  18.   text-decoration: none;
  19. }
  20. ul{
  21.   list-style: none;
  22. }
  23. input{
  24.   /*1.清除文本框获取焦点时默认的边框阴影*/
  25.   outline: none;
  26.   /*2.去除边框*/
  27.   border: none;
  28.   /*3.添加边框*/
  29.   border: 1px solid #ccc;
  30. }

  31. /*2.添加新的样式*/
  32. .f_left{
  33.   float: left;
  34. }
  35. .f_right{
  36.   float: right;
  37. }
  38. .m_left10{
  39.   margin-left: 10px;
  40. }
  41. .m_right10{
  42.   margin-right: 10px;
  43. }
  44. .m_top10{
  45.   margin-top: 10px;
  46. }
  47. .clearfix::before,
  48. .clearfix::after{
  49.   content: "";
  50.   display: block;
  51.   height: 0;
  52.   line-height: 0px;
  53.   clear: both;
  54.   visibility: hidden;
  55. }
复制代码
  1. window.onload = function () {
  2.   banner();
  3. }

  4. //轮播图
  5. function banner(){
  6.    /*1.设置修改轮播图的页面结构
  7.   * a.在开始位置添加原始的最后一张图片
  8.   * b.在结束位置添加原始的第一张图片*/
  9.   /*1.1.获取轮播图结构*/
  10.   var banner=document.querySelector(".jd_banner");
  11.   /*1.2.获取图片容器*/
  12.   var imgBox=banner.querySelector("ul:first-of-type");
  13.   //1.3 获取第一张图片
  14.   var first=imgBox.querySelector("li:first-of-type");
  15.   //1.4获取最后一张图
  16.   var last=imgBox.querySelector("li:last-of-type");
  17.   // console.log(first);
  18.   // console.log(last);
  19.   //克隆添加图片
  20.    /*1.5.在首尾插入两张图片  cloneNode:复制一个dom元素*/
  21.   imgBox.appendChild(first.cloneNode(true));
  22.   /*1.6insertBefore(需要插入的dom元素,位置)*/
  23.   imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
  24.   //获取对应的样式
  25.   //2.1获取li的位置
  26.   var lis=imgBox.querySelectorAll("li");
  27.   /*2.2 获取li元素的数量*/
  28.   var count=lis.length;
  29.   /*2.3.获取banner的宽度*/
  30.   var bannerWidth=banner.offsetWidth;
  31.   /*2.4 设置图片盒子的宽度*/
  32.   imgBox.style.width=count*bannerWidth+"px";
  33.   /*2.5 设置每一个li(图片)元素的宽度*/
  34.   for(var i=0; i < lis.length;i++){
  35.     lis[i].style.width=bannerWidth+"px";
  36.   }
  37.   /*定义图片索引:图片已经有一个宽度的默认偏移*/
  38.   var index=1;
  39.   /*3.设置默认的偏移*/
  40.   imgBox.style.left=-bannerWidth+"px";
  41.    /*4.当屏幕变化的时候,重新计算宽度*/
  42.    window.onresize=function(){
  43.      bannerWidth=banner.offsetWidth+"px";
  44.      imgBox.style.width=count*bannerWidth+"px";
  45.      for(var i = 0; i < lis.length;i++){
  46.        lis[i].style.width=bannerWidth+"px";
  47.      }
  48.      imgBox.style.left=-index*bannerWidth+"px";
  49.    }
  50.    //自动轮播
  51.    var timerId;
  52.    var strtime=function(){
  53.      timerId=setInterval(function(){
  54.       index++;
  55.       //添加过度效果
  56.       imgBox.style.transition="left 0.5s ease-in-out"
  57.       //设置偏移量
  58.       imgBox.style.left=(-index*bannerWidth)+"px";
  59.       setTimeout(function(){
  60.         //当走到最后一张时候,我就让他等于最后一张
  61.         if(index==count-1){
  62.           index=1;
  63.           // 清除过度效果
  64.           imgBox.style.transition="none";
  65.           /*偏移到指定的位置*/
  66.            imgBox.style.left=(-index*bannerWidth)+"px";
  67.         }
  68.       },500)
  69.      },1500)
  70.    }
  71.    //自动播放调用
  72.    strtime();
  73.    //实现手动轮播
  74.    var startX,moveX,distanceX;
  75.    /*为图片添加触摸事件--触摸开始*/
  76.    var isEnd = true;
  77.    imgBox.addEventListener("touchstart",function(e){
  78.      //停止定时器
  79.     clearInterval(timerId);
  80.     //console.log(e);
  81.     startX=e.targetTouches[0].clientX;  
  82.    });
  83.    //为图片添加触摸过程,滑动图片
  84.    imgBox.addEventListener("touchmove",function(e){
  85.    if(isEnd==true){
  86.        //console.log(123);
  87.       
  88.      /*记录手指在滑动过程中的位置*/
  89.     moveX=e.targetTouches[0].clientX;
  90.     /*计算坐标的差异*/
  91.     distanceX=moveX-startX;
  92.     //清除过度效果
  93.     imgBox.style.transition="none";
  94.     //基于之前轮播图偏移的位置
  95.     imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
  96.    }
  97.    })
  98.    /*添加触摸结束事件*/
  99.    imgBox.addEventListener("touchend",function(e){
  100.      //获取滑动距离,判断是否超过100px
  101.      isEnd=false;
  102.      if(Math.abs(distanceX) > 50){
  103.        //判断滑动方向
  104.        if(distanceX > 0){//上一张
  105.         index--;
  106.        }else{//下一张
  107.          index++;
  108.        }
  109.        //过度效果
  110.        imgBox.style.transition="left 0.5s ease-in-out";
  111.        //偏移位置
  112.        imgBox.style.left=-index*bannerWidth+"px";
  113.      }else if(Math.abs(distanceX) > 0){//回弹效果
  114.        //过度效果
  115.        imgBox.style.transition="left 0.5s ease-in-out";
  116.        //偏移位置
  117.        imgBox.style.left=-index*bannerWidth+"px";
  118.      }
  119.       /*将上一次move所产生的数据重置为0*/
  120.     startX=0;
  121.     moveX=0;
  122.     distanceX=0;
  123.      
  124.    });
  125.    /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕,当一个元素的过渡效果执行完毕的时候,会触发这个事件*/
  126.    imgBox.addEventListener("webkitTransitionEnd",function(){
  127.      console.log(index,33333);
  128.       
  129.     /*如果到了最后一张(count-1),回到索引1*/
  130.     /*如果到了第一张(0),回到索引count-2*/
  131.     if(index==count-1){
  132.       index=1;
  133.       imgBox.style.transition="none";
  134.       imgBox.style.left=-index*bannerWidth+"px";
  135.     }else if(index==0){
  136.       index=count-2;
  137.       imgBox.style.transition="none";
  138.       imgBox.style.left=-index*bannerWidth+"px";
  139.     }
  140.     yuandian(index);
  141.     setTimeout(function () {
  142.       isEnd=true;
  143.       clearInterval(timerId);
  144.       strtime();
  145.      },100)
  146.    });

  147.   // //圆点排他
  148.   var yuandian=function (index) {
  149.     //先找到所有的li 进行遍历移除所有样式,为自己加上样式
  150.     var lis=banner.querySelector("ul:last-of-type").querySelectorAll("li");
  151.     for(var i = 0; i < lis.length; i++){
  152.       lis[i].classList.remove("active");
  153.     }
  154.     lis[index-1].classList.add("active");
  155.    }
  156.    

  157. }
复制代码


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员

1关注

1粉丝

114帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )