day0406
作者:互联网
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
对象 面向对象
标签:function,title,imgCon,pos,carousel,day0406,left 来源: https://blog.csdn.net/qq_46008442/article/details/115459600