经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
移动端轮播图
来源：cnblogs　　作者：rabbit_zero　　时间：2018/12/10 9:37:22　　对本文有异议

这是结构

  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">
  8.     <link rel="stylesheet" href="./css/base.css">
  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:;"> <img src="./uploads/l1.jpg" alt="" /> </a>
  19.                   </li>
  20.                   <li>
  21.                     <a href="javascript:;"> <img src="./uploads/l2.jpg" alt="" /> </a>
  22.                   </li>
  23.                   <li>
  24.                     <a href="javascript:;"> <img src="./uploads/l3.jpg" alt="" /> </a>
  25.                   </li>
  26.                   <li>
  27.                     <a href="javascript:;"> <img src="./uploads/l4.jpg" alt="" /> </a>
  28.                   </li>
  29.                   <li>
  30.                     <a href="javascript:;"> <img src="./uploads/l5.jpg" alt="" /> </a>
  31.                   </li>
  32.                   <li>
  33.                     <a href="javascript:;"> <img src="./uploads/l6.jpg" alt="" /> </a>
  34.                   </li>
  35.                   <li>
  36.                     <a href="javascript:;"> <img src="./uploads/l7.jpg" alt="" /> </a>
  37.                   </li>
  38.                   <li>
  39.                     <a href="javascript:;"> <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>

这是CSS

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

dase

  1. /*公共样式*/
  2.  
  3. /*1.样式重置*/
  4. html,body,ul,li,img,a,p,div,form,input,h3{
  5.     padding: 0;
  6.     margin: 0;
  7.     /*设置盒模型*/
  8.     box-sizing: border-box;
  9.     /*去除移动端特有的点击高亮效果*/
  10.     -webkit-tap-highlight-color: transparent;
  11. }
  12. body{
  13.     font-family: "微软雅黑",sans-serif;
  14.     font-size: 13px;
  15. }
  16. a,
  17. a:hover{
  18.     color: #666;
  19.     text-decoration: none;
  20. }
  21. ul{
  22.     list-style: none;
  23. }
  24. input{
  25.     /*1.清除文本框获取焦点时默认的边框阴影*/
  26.     outline: none;
  27.     /*2.去除边框*/
  28.     border: none;
  29.     /*3.添加边框*/
  30.     border: 1px solid #ccc;
  31. }
  32.  
  33. /*2.添加新的样式*/
  34. .f_left{
  35.     float: left;
  36. }
  37. .f_right{
  38.     float: right;
  39. }
  40. .m_left10{
  41.     margin-left: 10px;
  42. }
  43. .m_right10{
  44.     margin-right: 10px;
  45. }
  46. .m_top10{
  47.     margin-top: 10px;
  48. }
  49. .clearfix::before,
  50. .clearfix::after{
  51.     content: "";
  52.     display: block;
  53.     height: 0;
  54.     line-height: 0px;
  55.     clear: both;
  56.     visibility: hidden;
  57. }

js

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

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号