这是结构

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    <  name=\"viewport\" content=\"width=device-width, user-scalable=no initial-scale=1.0\">
    <  http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
    <  rel=\"stylesheet\" href=\"./css/jd_phnoe.css\">
    <  rel=\"stylesheet\" href=\"./css/ .css\">
    < >Document</ >
  
    <  src=\"./js/jd_phnoe.js\"></ >
</head>
<body>
        <div class=\"jd_layout\">
        <div class=\"jd_banner\">
                <ul class=\"jd_bannerimg clearfix\">
                  <li>
                    <a href=\" :;\"> <img src=\"./uploads/l1.jpg\" alt=\"\" /> </a>
                  </li>
                  <li>
                    <a href=\" :;\"> <img src=\"./uploads/l2.jpg\" alt=\"\" /> </a>
                  </li>
                  <li>
                    <a href=\" :;\"> <img src=\"./uploads/l3.jpg\" alt=\"\" /> </a>
                  </li>
                  <li>
                    <a href=\" :;\"> <img src=\"./uploads/l4.jpg\" alt=\"\" /> </a>
                  </li>
                  <li>
                    <a href=\" :;\"> <img src=\"./uploads/l5.jpg\" alt=\"\" /> </a>
                  </li>
                  <li>
                    <a href=\" :;\"> <img src=\"./uploads/l6.jpg\" alt=\"\" /> </a>
                  </li>
                  <li>
                    <a href=\" :;\"> <img src=\"./uploads/l7.jpg\" alt=\"\" /> </a>
                  </li>
                  <li>
                    <a href=\" :;\"> <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.  = 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. =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\");
      }
     

}

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章