day0406

动画

DOM非常不适合做动画
多个动画都是集中在一个setinterval

requestAnimationFrame

// 在下一个请求的执行帧上执行这个回调函数
ids=requestAnimationFrame(animation);
// cancelAnimationFrame(ids)//清除动画请求

CSS动画

下载引入外部样式

<link rel="stylesheet" href="./css/animate.css">

<div class="div1 animated rubberBand"></div>

多个小球动画

loading

Tween

轮播图

body {
  margin: 0;
  padding: 0;
}
.title .date {
  font-size: 18px;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.title .day {
  font-size: 34px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.title {
  color: white;
  position: absolute;
  left: 250px;
  top: 50px;
  user-select: none;
}
.title > h3 {
  font-size: 22px;
  font-weight: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  margin: 10px;
}
.carousel {
  width: 1350px;
  height: 450px;
  position: relative;
  overflow: hidden;
  margin: auto;
}
.carousel .item > img {
  width: 1350px;
  height: 450px;
}
.imgCon {
  position: absolute;
  width: 2700px;
  height: 450px;
  left: 0;
}
.item {
  position: relative;
  float: left;
}
ul {
  position: absolute;
  bottom: 20px;
  left: 620px;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul > li {
  border: 1px solid #ff0000;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  float: left;
  margin-right: 10px;
}
.left,
.right {
  position: absolute;
  top: calc(50% - 30px);
}
.left {
  left: 50px;
}
.right {
  right: 50px;
}

const WIDTH = 1350;
var imgCon, ul,prev;
var title = [
  {
    id: 1001,
    src: "a.jpg",
    date: "19/Dec.2020",
    head: "首尔｜原味秋天，当阳光遇上清风",
  },
  {
    id: 1002,
    src: "b.jpg",
    date: "18/Dec.2020",
    head:
      "六朝金粉地，最忆是金陵 | 看尽南京漫天的枫红杏黄，吃遍大街小巷地道的江浙美食",
  },
  {
    id: 1003,
    src: "c.jpg",
    date: "17/Dec.2020",
    head:
      "【一路向南】一个人说走就走的背包旅行，“两广三南”5省20天超长夏天",
  },
  {
    id: 1004,
    src: "d.jpg",
    date: "16/Dec.2020",
    head: "新都桥，我爱你从秋天开始。",
  },
  {
    id: 1005,
    src: "e.jpg",
    date: "15/Dec.2020",
    head: "穿越千年行，埃及十日谈！（没有套路的埃及行终将是不完整的）",
  },
];
var itemList = {},
  pos = 0,
  x = 0,
  speed=50,
  bool=false,
  autoBool=true,
  time=200,
  direction = "left";

init();
function init() {
  var carousel = document.createElement("div");
  carousel.className = "carousel";
  createImgCon(carousel);
  createDot(carousel);
  createBn(carousel);
  document.body.appendChild(carousel);
  prevChange();
  animation();
  carousel.addEventListener("mouseenter",mouseHandler);
  carousel.addEventListener("mouseleave",mouseHandler);
}

function mouseHandler(e){
   autoBool=e.type==="mouseleave";
    time=200;
}

function createImgCon(parent) {
  imgCon = document.createElement("div");
  imgCon.className = "imgCon";
  imgCon.appendChild(getItem(title[0]));
  parent.appendChild(imgCon);
}
function createDot(parent) {
  ul = document.createElement("ul");
  ul.innerHTML = title.reduce((value, item) => {
    return value + "<li></li>";
  }, "");
  ul.addEventListener("click", dotClickhandler);
  parent.appendChild(ul);
}
function createBn(parent) {
  var src = ["left", "right"];
  src.forEach((item) => {
    var img = new Image();
    img.src = `./img/${item}.png`;
    img.className = item;
    parent.appendChild(img);
    img.addEventListener("click", bnClickHandler);
  });
}

function getItem(o) {
  if (itemList[o.id]) return itemList[o.id];
  var div = document.createElement("div");
  div.className = "item";
  var arr = o.date.split(/(?=\/)/);
  div.innerHTML = `
     <img src="./img/${o.src}">
      <div class="title">
       <div class="date"><span class="day">${arr[0]}</span>${arr[1]}</div>
       <h3>${o.head}</h3>
     </div>
    `;
  itemList[o.id] = div;
  return div;
}

function dotClickhandler(e) {
  if (e.target.constructor !== HTMLLIElement) return;
  var index = Array.from(ul.children).indexOf(e.target);
  if (index === pos) return;
  if (index > pos) direction = "left";
  else direction = "right";
  pos = index;
  insertNextImg();
}

function bnClickHandler(e) {
  if (bool)return;
  if (this.src.includes("left")) {
    direction = "right";
    pos--;
    if (pos < 0) pos = title.length - 1;
  } else {
    direction = "left";
    pos++;
    if (pos > title.length - 1) pos = 0;
  }
  insertNextImg();
}

function insertNextImg() {
  if (direction === "left") {
    imgCon.appendChild(getItem(title[pos]));
    x = 0;
    imgCon.style.left = x + "px";
  } else {
    imgCon.insertBefore(getItem(title[pos]), imgCon.firstElementChild);
    x = -WIDTH;
    imgCon.style.left = x + "px";
  }
  bool=true;
  prevChange();
}

function animation(){
    requestAnimationFrame(animation);
    imgMove();
    autoPlay();
}
function autoPlay(){
    if(!autoBool) return;
    time--;
    if(time>0) return;
    time=200;
    var evt=new MouseEvent("click");
    document.querySelector(".right").dispatchEvent(evt);
}

function imgMove(){
    if(!bool) return;
    if(direction==="left"){
        x-=speed;
        if(x<=-WIDTH){
            imgCon.firstElementChild.remove();
            x=0;
            bool=false;
        }
    }else{
        x+=speed;
        if(x>=0){
            imgCon.lastElementChild.remove();
            x=0;
            bool=false;
        }
    }
    imgCon.style.left=x+"px";
}


function prevChange(){
      if(prev){
          prev.style.backgroundColor="rgba(255,0,0,0)";
      }
      prev=ul.children[pos];
      prev.style.backgroundColor="#FF9d00";
  }

动画
轮播图 放大镜 瀑布流懒加载 购物车

ajax通信
php mysql node.js

网络

jquery

对象 面向对象