前端开发：网页布局与轮播图实现解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44675537/article/details/90202845

本文详细介绍了网页产品区域的结构分析，包括上下结构、标题和内容的样式设置。同时，讲解了图片边框处理、搜索块滚动透明效果的实现以及倒计时逻辑。重点讨论了轮播图的实现，包括图片的前后追加、宽度计算、拖拽效果以及自动轮播的细节。此外，还涉及到了移动端的touch事件和元素拖拽原理。通过对这些关键技术的解析，帮助读者深入理解前端网页布局和交互设计。

产品区域结构分析

结构分为上下结构，标题和内容

标题
内容

我们会发现内容不管怎么排列都是三张图片，而且具有共同的样式，宽50%；左浮动右浮动

所以准备好这三个样式
```
.a_50 {
    width: 50%;
    display: block;
}
.f_left {
    float: left;
}
.f_right {
    float: right;
}
```
然后当前这个元素需要什么就加哪个类名即可
图片边框注意不能给大图片，因为大图片切图时候有问题，通过给小图片设置左下边框
大图片通过白色背景掩饰

产品秒杀块

不要复制之前的结构重新写

<div class="jd_sk">
    <div class="jd_sk_title">
    </div>
    <div class="jd_sk_content"></div>
</div>

搜索块js效果

当我们滑动页面的时候，设置搜索块的背景色的透明度

设置搜索块的背景色的透明度，在滑动页面的时候
```
注册window.onscroll
```
在onscroll事件函数内部，设置搜索块的背景色的透明度
透明度= 滑出去的距离/轮播图的高度

获取滑出去的高度

offsetTop = document.documentElement.scrollTop || document.body.scrollTop

获取轮播图的高度

var banner =document.querySelector(".jd_banner");
var bannerHeight=banner.offsetHeight;

opacity= offsetTop/bannerHeight

得到透明度之后将透明度设置给搜索快的rgba

var search=document.querySelector(".jd_search");
search.style.backgroundColor="rgba(233,35,34,"+opacity+")";

判断如果滑出去的距离小于轮播图的高度设置背景色才是有意义的，如果要是大于了，则无意义

if(offsetTop < bannerHeight){
            opacity=offsetTop/bannerHeight;
            /*设置样式*/
            search.style.backgroundColor="rgba(233,35,34,"+opacity+")";
}

倒计时逻辑分析

首先定义一个总秒数
设置一个定时器，每个一秒，让总秒数减一
将减完的秒数转化成时分秒的格式
最后在将时分秒一次填入页面的dom元素里面即可
如果总秒数小于0，要清除定时器

轮播图结构修改

因为轮播图要实现前后可拖拽效果，所以要在首尾追加两张图片
- 利用js拿到第一个li
```
var banner=document.querySelector(".jd_banner");
var imgBox=banner.querySelector("ul:first-of-type");
var first=imgBox.querySelector("li:first-of-type");
```
- 将第一个利用clone拷贝一份之后
```
var clonefirstLi = first.cloneNode(true)
```
- 利用appendChild将拷贝之后的li追加到ul结尾处
```
imgBox.appendChild(clonefirstLi);
```
- 利用js拿到最后一个li
```
var last=imgBox.querySelector("li:last-of-type");
```
- 将最后一个li利用clone拷贝一份
```
var cloneLastLi = last.cloneNode(true)
```
- 将拷贝之后的利用insertBefore插入到第一个li之前
```
imgBox.insertBefore(cloneLastLi,imgBox.firstChild);
```
  insertBefore有两个参数，第一个参数代表要插入的元素，第二个参数代表插入的位置
因为追加了两个li所以之前的width需要重新计算
- li的宽度等于banner最外层的宽度
```
for(var i=0;i<lis.length;i++){
        // console.log(lis[i])
        lis[i].style.width=bannerWidth+"px";
    }
```
- ul的宽度等于li的个数*li的每一个的宽度，li的宽度等于jd_banner的宽度 li.length x jd_banner的宽度
```
/*2.3.获取banner的宽度*/
var bannerWidth=banner.offsetWidth; //   418
/*2.4 设置图片盒子的宽度*/
imgBox.style.width=count*bannerWidth+"px";
```
- 因为在第一个li之前追加了最后一个li所以第一个元素变成了最后一张图片，所以要将ul定位到第二个元素也就是轮播图的第一张图片
```
imgBox.style.left=-bannerWidth+"px";
```
因为窗口发生变化宽度需要重新计算所以利用onsize事件将上面的样式在写一遍
轮播图自动轮播

轮播图的轮播主要依靠索引
- 最开始定义一个索引，默认等于1，因为我们要显示第二个元素，也就是第一张图片
- 我们定义一个定时器，然后再定时期内部，让索引++
- 想轮播图轮播起来，就让负的索引*bannerwidth+‘px’
- 在加上过度会更好一些
- 因为如果走到最后一个元素，需要瞬间定位到第一张图片，也就是第二个元素
```
if(index==count-1){
  index = 1;
  因为是瞬间过度，所以要清除过度
  imgBox.style.transition="none";
  imgBox.style.left=(-index*bannerWidth)+"px";
}
```
- 防止当走到倒数第二张的时候，可能刚要起步向下一张轮播，瞬间被修改到第二个元素
```
给判断条件加一个延迟
```
自动轮播细节处理

移动端的touch事件

touchstart：手指触摸到屏幕的这个元素时候会触发
touchmove：手指在屏幕上某个元素移动的时候会触发
touchend：手指离开的时候会触发
touch事件对象中的属性
- touches：记录了屏幕上所有的手指
  - clientX：距离视口的x坐标
  - clientY：距离视口的y坐标
  - pageX：距离页面内容的x坐标
  - pageY：距离页面内容的y坐标
  - screenX：距离窗口的x坐
  - screenY：距离窗口的y坐标
- targetTouches：记录当前元素上的所有手指
- changedTouches：记录的是发生变化的手指，发生变化是指一个手指从有到无，或者从无到有

元素拖拽的原理

就是在touchstart的时候获取一个坐标，然后在touchmove的时候在获取一下坐标，然后用move的坐标减去start时候的坐标，最终的差值，也就是元素移动的距离

注册touchstart事件

startX= e.targetTouches[0].clientX;
startY= e.targetTouches[0].clientY;

注册touchmove事件

moveX= e.targetTouches[0].clientX;
moveY= e.targetTouches[0].clientY;

计算差值

distanceX=moveX-startX;
distanceY=moveY-startY;

差值就是偏移的距离

div.style.transform="translate("+distanceX+"px,"+distanceY+"px)";

轮播图滑动操作

给ul图片盒子注册touchstart事件（因为ul没有高度，所以要找回高度，事件才会有效，清除浮动）
```
 /*清除定时器*/
 clearInterval(timerId);
 /*获取当前手指的起始位置*/
 startX= e.targetTouches[0].clientX;
```

给ul注册touchmove事件

获取x坐标
moveX= e.targetTouches[0].clientX;
计算差值
distanceX=moveX-startX;
不能直接将差值交给ul的left
因为偏移的位置要相对与当前的这张图片的位置进行偏移
imgBox.style.left=(-index*bannerWidth + distanceX)+"px";

因为最开始没有过度，当轮播图轮播的时候将过度添加上，所以再次拖拽的时候也会以过度的形式，所以清除过度即可

松开手指的操作

什么时候翻页？只要你滑动的距离超过100，因为我们的差值可能是负值，所以我们取绝对值

if(Math.abs(distanceX)>100){
  //  上一张
  if(distanceX>0){
    index--
  }else{
    index++
  }
  最终根据索引进行翻页
  imgBox.style.transition="left 0.5s ease-in-out";
  imgBox.style.left=-index*bannerWidth+"px";
}

什时候回弹？只要滑动的距离没有超过100并且大于0

else(Math.abs(distanceX) > 0){
  imgBox.style.transition="left 0.5s ease-in-out";
  imgBox.style.left=-index*bannerWidth+"px";
}

利用webkitTransitionEnd来实现轮播图的无缝循环,过度结束的时候会触发

如果index=0应该将index变成count-2

如果index=count-1应该将index变成1

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";
}