0712 NOTE
动画
DOM不适合做动画，多个动画都是集中在一个setInterval中
setInterval本身不断渲染，强行覆盖数据，不断地进行重绘或者回流，导致页面刷新频繁，屏幕闪烁
performance.now() //性能
requestAnimationFrame(animation) //请求动画帧
原生js轮播图
轮播图1
/*css样式*/
body{
margin: 0;
}
#carousel{
position: relative;
min-width: 1200px;
min-height: 400px;
}
.imgCon{
width: 100%;
height:33.3vw;
min-height: 400px;
position: relative;
}
.imgCon>.bgimage{
position: absolute;
width: 100%;
height: 100%;
background-image: url(./img/a.jpeg);
background-size: 100% 100%;
left: 0;
top: 0;
transition: all 0.3s;
}
.imgCon>h3,.imgCon>p{
position: absolute;
font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
color: #FFF;
text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
font-size: 20px;
cursor: pointer;
left: 15vw;
top: 0px;
}
.imgCon>p{
top:35px;
}
.imgCon>h3>span{
font-size: 30px;
}
ul{
list-style: none;
position: absolute;
right: 40px;
top:0.1vw;
}
ul>li{
margin-top: 0.4vw;
border: 2px solid transparent;
}
<!--html样式-->
<div id="carousel">
<div class="imgCon">
<div class="bgimage"></div>
<h3><span>12/</span>Jul.2021</h3>
<p>No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。</p>
</div>
<ul>
<li><img src="./img/a.png"></li>
<li><img src="./img/b.png"></li>
<li><img src="./img/c.png"></li>
<li><img src="./img/d.png"></li>
<li><img src="./img/e.png"></li>
</ul>
</div>
var arr=[
{date:"12/Jul.2021",title:"No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。",img:"./img/a.jpeg"},
{date:"11/Jul.2021",title:"128座乐园！284座过山车！我的全球乐园打卡计划持续更新ing",img:"./img/b.jpg"},
{date:"10/Jul.2021",title:"带着父母旅行的第四年，疫情下的Flag小旗在广州飘～谢谢你们陪着我，会勇敢坚定的走自己的路",img:"./img/c.jpg"},
{date:"09/Jul.2021",title:"念念闽夏｜日子娓娓，一如夏季绵长",img:"./img/d.jpg"},
{date:"08/Jul.2021",title:"30天自驾16座城市，从南到北，一万公里重新认识你。（海南-内蒙古-海南）",img:"./img/e.jpg"},
]
var ul,prev,imgCon;
init(); //函数式编程 执行
function init(){
ul=document.querySelector("ul"); //获取页面元素ul，赋给变量ul
imgCon=document.querySelector(".imgCon"); //获取页面class名为imgCon的元素，赋给变量imgCon
ul.addEventListener("click",clickHandler); //ul添加事件侦听，点击事件
changePrev(ul.firstElementChild); //将ul的第一子元素作为参数传入changePrev函数，执行
}
function clickHandler(e){
// console.log(e.target.nodeName);
if(e.target.nodeName!=="IMG") return; //如果当前目标对象不是IMG，返回 不执行
var index=Array.from(ul.children).indexOf(e.target.parentElement); //将ul子元素列表转化为数组，找寻当前目标对象的父元素对应下标，赋给index
changePrev(e.target.parentElement); //将目标对象父元素作为参数传入changePrev函数，执行
changeImg(arr[index]); //将数组中index为下标的元素作为参数传入changeImg函数，执行
}
function changePrev(elem){
if(prev){ //如果prev存在
prev.style.borderColor="rgba(0,0,0,0)"; //样式修改
}
prev=elem; //参数对象赋给prev
prev.style.borderColor="#FF9D00" //样式修改
}
function changeImg(data){
imgCon.firstElementChild.style.backgroundImage="url("+data.img+")"; //imgCon的第一个子元素背景图片样式修改
imgCon.lastElementChild.textContent=data.title; //imgCon的最后一个子元素的文本内容修改
imgCon.children[1].innerHTML=`${data.date.split(/(?<=\/)/).reduce((value,item,i)=>{ //模板字面量写入修改imgCon的第一项子元素内容
if(i===0) value+="<span>"+item+"</span>"; //如果为数组第0项，value值操作如是
else value+=item; //为数组第一项则操作如是
return value; //返回value
},"")}`
}
</script>
轮播图2
/*css样式*/
body{
margin: 0;
}
#carousel{
position: relative;
min-width: 1200px;
min-height: 400px;
}
.imgCon{
width: 100%;
height:33.3vw;
min-height: 400px;
position: relative;
}
.imgList{
position: absolute;
height: 33.3vw;
width: 100%;
z-index: 0;
opacity: 0;
transition: all 1s;
}
.imgList>.bgimage{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.imgList>h3,.imgList>p{
position: absolute;
font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
color: #FFF;
text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
font-size: 20px;
cursor: pointer;
left: 15vw;
top: 0px;
}
.imgList>p{
top:35px;
}
.imgList>h3>span{
font-size: 30px;
}
ul{
list-style: none;
position: absolute;
right: 40px;
top:0.1vw;
}
ul>li{
margin-top: 0.4vw;
border: 2px solid transparent;
font-size: 0;
}
<!--html样式-->
<div id="carousel">
<div class="imgCon">
<div class="imgList">
<img class="bgimage" src="./img/a.jpeg">
<h3><span>12/</span>Jul.2021</h3>
<p>No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/b.jpg">
<h3><span>11/</span>Jul.2021</h3>
<p>128座乐园！284座过山车！我的全球乐园打卡计划持续更新ing</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/c.jpg">
<h3><span>10/</span>Jul.2021</h3>
<p>带着父母旅行的第四年，疫情下的Flag小旗在广州飘～谢谢你们陪着我，会勇敢坚定的走自己的路</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/d.jpg">
<h3><span>09/</span>Jul.2021</h3>
<p>念念闽夏｜日子娓娓，一如夏季绵长</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/e.jpg">
<h3><span>08/</span>Jul.2021</h3>
<p>30天自驾16座城市，从南到北，一万公里重新认识你。（海南-内蒙古-海南）</p>
</div>
</div>
<ul>
<li><img src="./img/a.png"></li>
<li><img src="./img/b.png"></li>
<li><img src="./img/c.png"></li>
<li><img src="./img/d.png"></li>
<li><img src="./img/e.png"></li>
</ul>
</div>
var ul,prev,imgCon,imgList,prevImg;
init();
function init(){
ul=document.querySelector("ul");
imgCon=document.querySelector(".imgCon");
imgList=document.querySelectorAll(".imgList");
ul.addEventListener("click",clickHandler);
changePrev(ul.firstElementChild);
}
function clickHandler(e){
if(e.target.nodeName!=="IMG") return;
changePrev(e.target.parentElement);
}
function changePrev(elem){
if(prev){
prev.style.borderColor="rgba(0,0,0,0)";
}
prev=elem;
prev.style.borderColor="#FF9D00"
var index=Array.from(ul.children).indexOf(elem);
changeImg(index);
}
function changeImg(index){
if(prevImg){
prevImg.style.opacity=0;
}
prevImg=imgList[index];
prevImg.style.opacity=1;
}
轮播图3
/*css样式*/
body{
margin: 0;
}
#carousel{
position: relative;
min-width: 1200px;
min-height: 400px;
}
.imgCon{
width: 100%;
height:33.3vw;
min-height: 400px;
position: relative;
}
.imgList{
position: absolute;
height: 33.3vw;
width: 100%;
z-index: 0;
opacity: 0;
transition: all 1s;
}
.imgList>.bgimage{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.imgList>h3,.imgList>p{
position: absolute;
font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
color: #FFF;
text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
font-size: 20px;
cursor: pointer;
left: 15vw;
top: 0px;
}
.imgList>p{
top:35px;
}
.imgList>h3>span{
font-size: 30px;
}
ul{
list-style: none;
position: absolute;
right: 40px;
top:0.1vw;
}
ul>li{
margin-top: 0.4vw;
border: 2px solid transparent;
font-size: 0;
}
<!--html样式-->
<div id="carousel">
<div class="imgCon">
</div>
<ul>
<li><img src="./img/a.png"></li>
<li><img src="./img/b.png"></li>
<li><img src="./img/c.png"></li>
<li><img src="./img/d.png"></li>
<li><img src="./img/e.png"></li>
</ul>
</div>
var arr=[
{date:"12/Jul.2021",title:"No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。",img:"./img/a.jpeg"},
{date:"11/Jul.2021",title:"128座乐园！284座过山车！我的全球乐园打卡计划持续更新ing",img:"./img/b.jpg"},
{date:"10/Jul.2021",title:"带着父母旅行的第四年，疫情下的Flag小旗在广州飘～谢谢你们陪着我，会勇敢坚定的走自己的路",img:"./img/c.jpg"},
{date:"09/Jul.2021",title:"念念闽夏｜日子娓娓，一如夏季绵长",img:"./img/d.jpg"},
{date:"08/Jul.2021",title:"30天自驾16座城市，从南到北，一万公里重新认识你。（海南-内蒙古-海南）",img:"./img/e.jpg"},
]
var ul,prev,imgCon,imgList,prevImg;
init();
function init(){
ul=document.querySelector("ul");
imgCon=document.querySelector(".imgCon");
imgCon.innerHTML=arr.reduce((value,item)=>{
var ls=item.date.split(/(?<=\/)/);
value+=`<div class="imgList">
<img class="bgimage" src="${item.img}">
<h3><span>${ls[0]}</span>${ls[1]}</h3>
<p>${item.title}</p>
</div>`
return value;
},"");
imgList=document.querySelectorAll(".imgList");
ul.addEventListener("click",clickHandler);
changePrev(ul.firstElementChild);
}
function clickHandler(e){
if(e.target.nodeName!=="IMG") return;
changePrev(e.target.parentElement);
}
function changePrev(elem){
if(prev){
prev.style.borderColor="rgba(0,0,0,0)";
}
prev=elem;
prev.style.borderColor="#FF9D00"
var index=Array.from(ul.children).indexOf(elem);
changeImg(index);
}
function changeImg(index){
if(prevImg){
prevImg.style.opacity=0;
}
prevImg=imgList[index];
prevImg.style.opacity=1;
}
轮播图4
/*css样式*/
body{
margin: 0;
}
#carousel{
position: relative;
width: 100%;
height: 33.3vw;
min-width: 1200px;
min-height: 400px;
}
.imgCon{
width: 500vw;
height:100%;
min-height: 400px;
position: absolute;
left:0px;
transition: all 0.5s;
}
.imgList{
float: left;
height: 33.3vw;
width: 100vw;
transition: all 1s;
position: relative;
}
.imgList>.bgimage{
position: absolute;
height: 100%;
left: 0;
top: 0;
}
.imgList>h3,.imgList>p{
position: absolute;
font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
color: #FFF;
text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
font-size: 20px;
cursor: pointer;
left: 15vw;
top: 0px;
}
.imgList>p{
top:35px;
}
.imgList>h3>span{
font-size: 30px;
}
ul{
position: absolute;
list-style: none;
bottom: 30px;
left:50%;
transform: translate(-50%);
}
li{
width: 20px;
height: 20px;
border: 2px solid #FF0000;
border-radius: 20px;
margin-left: 10px;
float: left;
}
.left,.right{
position: absolute;
top:50%;
transform: translateY(-50%);
}
.left{
left:50px;
}
.right{
right: 50px;
}
<!--html样式-->
<div id="carousel">
<div class="imgCon">
<div class="imgList">
<img class="bgimage" src="./img/a.jpeg">
<h3><span>12/</span>Jul.2021</h3>
<p>No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/b.jpg">
<h3><span>11/</span>Jul.2021</h3>
<p>128座乐园！284座过山车！我的全球乐园打卡计划持续更新ing</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/c.jpg">
<h3><span>10/</span>Jul.2021</h3>
<p>带着父母旅行的第四年，疫情下的Flag小旗在广州飘～谢谢你们陪着我，会勇敢坚定的走自己的路</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/d.jpg">
<h3><span>09/</span>Jul.2021</h3>
<p>念念闽夏｜日子娓娓，一如夏季绵长</p>
</div>
<div class="imgList">
<img class="bgimage" src="./img/e.jpg">
<h3><span>08/</span>Jul.2021</h3>
<p>30天自驾16座城市，从南到北，一万公里重新认识你。（海南-内蒙古-海南）</p>
</div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img src="./img/left.png" class="left">
<img src="./img/right.png" class="right">
</div>
var ul,left,right,imgCon,prev;
var pos=0;
init();
function init(){
ul=document.querySelector("ul");
left=document.querySelector(".left");
right=document.querySelector(".right");
imgCon=document.querySelector(".imgCon");
ul.addEventListener("click",clickHandler)
left.addEventListener("click",bnClickHandler)
right.addEventListener("click",bnClickHandler)
window.addEventListener("resize",changePrev);
changePrev();
}
function clickHandler(e){
if(e.target.nodeName!=="LI") return;
pos=Array.from(ul.children).indexOf(e.target);
changePrev();
}
function bnClickHandler(e){
if(this===left){
pos--;
if(pos<0) pos=4;
}else{
pos++;
if(pos>4) pos=0;
}
changePrev();
}
function changePrev(){
if(prev){
prev.style.backgroundColor="rgba(0,0,0,0)";
}
prev=ul.children[pos];
prev.style.backgroundColor="red";
imgCon.style.left=-pos*document.documentElement.clientWidth+"px"
}
轮播图5
/*css样式*/
body{
margin: 0;
}
.carousel{
position: relative;
width: 100%;
height: 33.3vw;
overflow: hidden;
}
.imgCon{
width: 200vw;
height:100%;
position: absolute;
left:0px;
}
.imgList{
float: left;
height: 33.3vw;
width: 100vw;
transition: all 1s;
position: relative;
}
.imgList>.bgimage{
position: absolute;
height: 100%;
left: 0;
top: 0;
}
.imgList>h3,.imgList>p{
position: absolute;
font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
color: #FFF;
text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
font-size: 20px;
cursor: pointer;
left: 15vw;
top: 0px;
}
.imgList>p{
top:35px;
}
.imgList>h3>span{
font-size: 30px;
}
.carousel>ul{
position: absolute;
list-style: none;
bottom: 30px;
left:50%;
transform: translate(-50%);
}
.carousel>ul>li{
width: 20px;
height: 20px;
border: 2px solid #FF0000;
border-radius: 20px;
margin-left: 10px;
float: left;
}
.left,.right{
position: absolute;
top:50%;
transform: translateY(-50%);
}
.left{
left:50px;
}
.right{
right: 50px;
}
//Utils.js
export default class Utils{
static time={};
static i=0;
static random(min,max) {
return Math.floor(Math.random() * (max - min) + min);
}
static randomColor(alpha,r,g,b) {
if (alpha === undefined) alpha = 1;
if (alpha < 0) alpha = Math.random().toFixed(2);
var arr = Array.from(arguments);
arr.length = 4;
for (var i = 1; i < arr.length; i++) {
arr[i] = arr[i] > 255 ? 255 : (arr[i] < 0 ? 0 : (arr[i] === undefined ? Math.floor(Math.random() * 256) : arr[i]));
}
return "rgba(" + arr[1] + "," + arr[2] + "," + arr[3] + "," + alpha + ")";
}
static start(){
Utils.time[Utils.i]=Date.now();
return Utils.i++;
}
static stop(id){
if(Utils.time && Utils.time[id])
var t=Date.now()-Utils.time[id];
delete Utils.time[id];
return t;
}
static ce(type,style,parent){
var elem=document.createElement(type);
if(typeof parent==="string") parent=document.querySelector(parent);
if(parent) parent.appendChild(elem);
if(style){
for(var prop in style){
switch(prop){
case "width":
case "height":
case "left":
case "right":
case "top":
case "bottom":
case "borderWidth":
style[prop]=isNaN(style[prop]) ? style[prop] : style[prop]+"px"
}
elem.style[prop]=style[prop];
}
}
return elem;
}
static setCssObj(selector,style){
var styleSheet;
if(document.styleSheets.length===0){
var s=document.createElement("style");
document.head.appendChild(s);
}
styleSheet=document.styleSheets[document.styleSheets.length-1];
var str="";
for(var prop in style){
if(typeof style[prop]==="number") style[prop]+="px";
str+=prop.replace(/([A-Z])/g,function(t){
return "-"+t.toLowerCase();
})+":"+style[prop]+";";
}
styleSheet.addRule(selector,str,styleSheet.cssRules.length);
}
static setCss(str){
var styleSheet;
if(document.styleSheets.length===0){
var s=document.createElement("style");
document.head.appendChild(s);
}
styleSheet=document.styleSheets[document.styleSheets.length-1];
str.replace(/\n|\r/g,"").replace(/(.*?)\{(.*?)\}/g,function(item,$1,$2) {
styleSheet.addRule($1.trim(),$2.trim(),styleSheet.cssRules.length);
})
}
static loadImage(srcList,callback,basePath,extension){
if(basePath===undefined) basePath="";
else basePath=basePath.slice(-1)==="/" ? basePath : basePath+"/"
if(extension===undefined) extension=".jpg";
extension=extension.slice(0,1)==="." ? extension : "."+extension;
if(!srcList || srcList.length===0) return;
srcList=srcList.map(function(item){
return basePath+(/.jpg|.jpeg|.png|.bmp|.webp|.gif/.test(item) ? item : item+extension)
});
var img=new Image();
img.addEventListener("load",Utils.loadHandler);
img.src=srcList[0];
img.i=0;
img.callback=callback;
img.srcList=srcList;
img.list=[];
}
static loadHandler(e){
var img=e.currentTarget
img.list.push(img.cloneNode(false));
img.i++;
if(img.i>=img.srcList.length){
img.removeEventListener("load",Utils.loadHandler)
if(img.callback) img.callback(img.list);
else{
var evt=new Event("img_load_complete");
evt.list=img.list;
document.dispatchEvent(evt);
}
return;
}
img.src=img.srcList[img.i];
}
static dragOn(elem,rectObj){
elem.addEventListener("mousedown",Utils.mouseHandler);
elem.rectObj=rectObj;
elem.wh={w:elem.offsetWidth,h:elem.offsetHeight}
}
static dragOff(elem){
elem.removeEventListener("mousedown",Utils.mouseHandler);
}
static mouseHandler(e){
if(e.type==="mousedown"){
// this div
var div=e.currentTarget;
e.preventDefault();
div.point={x:e.offsetX,y:e.offsetY}
document.div=div;
document.addEventListener("mousemove",Utils.mouseHandler);
document.addEventListener("mouseup",Utils.mouseHandler);
}else if(e.type==="mousemove"){
var style=getComputedStyle(document.div.parentElement);
var rect={x:0,y:0};
if(style.position==="relative" || style.position==="absolute"){
rect=document.div.parentElement.getBoundingClientRect();
}
var x=e.x-rect.x-document.div.point.x;
var y=e.y-rect.y-document.div.point.y;
if(x>=document.div.rectObj.w-document.div.wh.w) x=document.div.rectObj.w-document.div.wh.w;
if(y>=document.div.rectObj.h-document.div.wh.h) y=document.div.rectObj.h-document.div.wh.h
if(x<=0) x=0;
if(y<=0) y=0;
document.div.style.left=x+"px";
document.div.style.top=y+'px';
}else if(e.type==="mouseup"){
// this document
document.removeEventListener("mousemove",Utils.mouseHandler);
document.removeEventListener("mouseup",Utils.mouseHandler);
}
}
}
import Utils from "./js/Utils.js";
var arr=[
{date:"12/Jul.2021",title:"No Fear in My Heart. 10天4700公里，自由散漫南疆奇遇记。",img:"./img/a.jpeg"},
{date:"11/Jul.2021",title:"128座乐园！284座过山车！我的全球乐园打卡计划持续更新ing",img:"./img/b.jpg"},
{date:"10/Jul.2021",title:"带着父母旅行的第四年，疫情下的Flag小旗在广州飘～谢谢你们陪着我，会勇敢坚定的走自己的路",img:"./img/c.jpg"},
{date:"09/Jul.2021",title:"念念闽夏｜日子娓娓，一如夏季绵长",img:"./img/d.jpg"},
{date:"08/Jul.2021",title:"30天自驾16座城市，从南到北，一万公里重新认识你。（海南-内蒙古-海南）",img:"./img/e.jpg"},
]
var bnList,imgList,imgCon,ul,carousel,prev;
var pos=0,
x=0,
speedX=100,
moveBool=false,
time=300,
autoBool=false,
direc="left";
init();
function init(){
var imgs=["./img/left.png","./img/right.png"].concat(arr.map(item=>item.img));
Utils.loadImage(imgs,loadHandler);
}
function loadHandler(list){
bnList=list.splice(0,2);
imgList=list.map((item,index)=>{
var elem=document.createElement("div");
elem.className="imgList";
var d=arr[index].date.split(/(?<=\/)/);
elem.innerHTML=`
<h3><span>${d[0]}/</span>${d[1]}</h3>
<p>${arr[index].title}</p>
`;
item.className="bgimage"
elem.insertBefore(item,elem.firstElementChild);
return elem;
});
createCarousel();
animation();
}
function createCarousel(){
carousel=document.createElement("div");
carousel.className="carousel";
imgCon=document.createElement("div");
imgCon.className="imgCon";
imgCon.appendChild(imgList[0]);
carousel.appendChild(imgCon);
ul=document.createElement("ul");
ul.innerHTML=arr.reduce((value,item)=>{
return value+"<li></li>";
},"");
ul.addEventListener("click",clickHandler);
carousel.appendChild(ul);
bnList.forEach((item,i)=>{
item.className=i===0 ? "left" :"right";
carousel.appendChild(item);
item.addEventListener("click",bnClickHandler);
})
document.body.appendChild(carousel)
carousel.addEventListener("mouseenter",mouseHandler)
carousel.addEventListener("mouseleave",mouseHandler)
changePrev()
}
function mouseHandler(e){
if(e.type==="mouseenter"){
autoBool=false;
time=300;
}else{
autoBool=true;
}
}
function clickHandler(e){
if(moveBool) return;
if(e.target.nodeName!=="LI") return;
var index=Array.from(ul.children).indexOf(e.target);
if(index===pos) return;
if(index>pos) direc="left";
else direc="right";
pos=index;
createNextImg()
}
function bnClickHandler(e){
if(moveBool) return;
if(bnList.indexOf(this)===0){
direc="right";
pos--;
if(pos<0) pos=arr.length-1;
}else{
direc="left";
pos++;
if(pos>arr.length-1) pos=0;
}
createNextImg()
}
function createNextImg(){
if(direc==="left"){
imgCon.appendChild(imgList[pos]);
x=0;
}else{
imgCon.insertBefore(imgList[pos],imgCon.firstElementChild);
x=-carousel.offsetWidth
}
imgCon.style.left=x+"px";
moveBool=true;
changePrev();
}
function changePrev(){
if(prev){
prev.style.backgroundColor="rgba(0,0,0,0)";
}
prev=ul.children[pos];
prev.style.backgroundColor="red";
}
function animation(){
requestAnimationFrame(animation);
imgConMove();
autoPlay();
}
function imgConMove(){
if(!moveBool) return;
if(direc==="left"){
x-=speedX;
if(x<=-carousel.offsetWidth){
moveBool=false;
imgCon.firstElementChild.remove();
x=0;
}
}else{
x+=speedX;
if(x>=0){
moveBool=false;
imgCon.lastElementChild.remove();
x=0;
}
}
imgCon.style.left=x+"px";
}
function autoPlay(){
if(!autoBool) return;
time--;
if(time>0) return;
time=300;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);
}
轮播图6
/*css样式*/
body
{
padding: 0;
margin: 0;
}
.carousel{
width: 100%;
height: 33.3vw;
background-image: url(img/a.jpg);
background-size: 100% 100%;
position: relative;
min-width: 1080px;
min-height: 360px;
transition: all 0.5s;
}
.icon_img{
position: absolute;
right: 100px;
border:2px solid transparent;
}
.icon_img:nth-child(1){
top:2vw;
}
.icon_img:nth-child(2){
top:8vw;
}
.icon_img:nth-child(3){
top:14vw;
}
.icon_img:nth-child(4){
top:20vw;
}
.icon_img:nth-child(5){
top:26vw;
}
.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;
}
<!--html样式-->
<div class="carousel">
<img src="./img/a_icon.png" alt="" class="icon_img">
<img src="./img/b_icon.png" alt="" class="icon_img">
<img src="./img/c_icon.png" alt="" class="icon_img">
<img src="./img/d_icon.png" alt="" class="icon_img">
<img src="./img/e_icon.png" alt="" class="icon_img">
<div class="title">
<div class="date"><span class="day">19</span>/Dec.2020</div>
<h3>首尔｜原味秋天，当阳光遇上清风</h3>
</div>
</div>
var prev;
var imgs;
var title = [ //图片上标题，整合成对象易于赋值
{ date: "19/Dec.2020", head: "首尔｜原味秋天，当阳光遇上清风" },
{
date: "18/Dec.2020",
head:
"六朝金粉地，最忆是金陵 | 看尽南京漫天的枫红杏黄，吃遍大街小巷地道的江浙美食",
},
{
date: "17/Dec.2020",
head:
"【一路向南】一个人说走就走的背包旅行，“两广三南”5省20天超长夏天",
},
{ date: "16/Dec.2020", head: "新都桥，我爱你从秋天开始。" },
{
date: "15/Dec.2020",
head: "穿越千年行，埃及十日谈！（没有套路的埃及行终将是不完整的）",
},
];
init(); //函数式编程 运行
function init(){
var carousel=document.querySelector(".carousel"); //获取类名为carsouel的元素并赋给声明变量 //该元素为外围的父元素盒子
imgs=Array.from(document.querySelectorAll(".icon_img")) //获取类名为icon_img的列表并转换为数组赋给变量imgs
carousel.addEventListener("click",clickhandler); //给carousel添加事件侦听，点击事件
changePrev(imgs[0]); //将数组imgs的第0项元素作为参数传入changeprev函数执行
}
function clickhandler(e){
console.log(e.target.nodeName); //由于是给父元素盒子添加的点击事件，因此点击盒子中的div、h3、span等标签都会触发事件
if(e.target.nodeName!=="IMG") return; //如果点击对象的节点名不是nodename，返回，不执行
changePrev(e.target); //将目标对象作为参数传入changePrev函数执行
var index=imgs.indexOf(e.target); //查找目标对象对应imgs数组中元素的下标并赋给变量index
// console.log(index);
changeTitle(index) //将index变量作为参数传入changetitle函数执行
console.log(e.target.src.replace("_icon.png",".jpg"));
this.style.backgroundImage="url("+e.target.src.replace("_icon.png",".jpg")+")"; //当前目标对象的背景图片属性赋为字符串url + 将.jpg字符串替换当前目标对象的src属性中的_icon.png字符串
}
function changePrev(elem){
if(prev){ //如果prev存在
prev.style.borderColor="transparent"; //变量prev的边框颜色样式变为透明
}
prev=elem; //将目标对象赋给变量prev
prev.style.borderColor="#FF9d00"; //变量的边框颜色改变为"FF9d00"
}
function changeTitle(index){
var o=title[index]; //声明变量o，并将数组title中下标为index的对象元素赋给o
var tilteDiv=document.querySelector(".title"); //声明变量tilteDiv，获取class名为title的元素赋给变量
var date=tilteDiv.firstElementChild; //声明变量date，date为变量titleDiv指向的元素的第一个子元素标签
var h3=tilteDiv.lastElementChild; //声明变量h3，h3变量为变量titleDiv指向的元素的最后一个子元素标签
var arr=o.date.split(/(?=\/)/); //声明变量arr，将对象o的date属性根据正则表达式规则分割转换为数组赋给arr //[19,18,17,16,15]
date.innerHTML=`<span class="day">${arr[0]}</span>${arr[1]}` //模板字面量将date写入页面：span标签包裹，class名为day，数组arr的两个元素写入
h3.innerHTML=o.head; //将对象o的head属性写入变量h3指向的页面元素
}
轮播图7
/*css样式*/
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: 6750px;
height: 450px;
left:0;
transition: all 0.5s;
}
.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;
}
<!--html样式-->
<div class="carousel">
<div class="imgCon">
<div class="item">
<img src="./img/a.jpg">
<div class="title">
<div class="date"><span class="day">19</span>/Dec.2020</div>
<h3>首尔｜原味秋天，当阳光遇上清风</h3>
</div>
</div>
<div class="item">
<img src="./img/b.jpg">
<div class="title">
<div class="date"><span class="day">18</span>/Dec.2020</div>
<h3>六朝金粉地，最忆是金陵 | 看尽南京漫天的枫红杏黄，吃遍大街小巷地道的江浙美食</h3>
</div>
</div>
<div class="item">
<img src="./img/c.jpg">
<div class="title">
<div class="date"><span class="day">17</span>/Dec.2020</div>
<h3>【一路向南】一个人说走就走的背包旅行，“两广三南”5省20天超长夏天</h3>
</div>
</div>
<div class="item">
<img src="./img/d.jpg">
<div class="title">
<div class="date"><span class="day">16</span>/Dec.2020</div>
<h3>新都桥，我爱你从秋天开始。</h3>
</div>
</div>
<div class="item">
<img src="./img/e.jpg">
<div class="title">
<div class="date"><span class="day">15</span>/Dec.2020</div>
<h3>穿越千年行，埃及十日谈！（没有套路的埃及行终将是不完整的）</h3>
</div>
</div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img class="left" src="./img/left.png">
<img class="right" src="./img/right.png">
</div>
var imgCon,ul,left,right,prev;
var pos=0;
init(); //函数式编程 执行
function init(){
imgCon=document.querySelector(".imgCon"); //获取页面class名为imgCon的元素赋给变量imgCon
ul=document.querySelector("ul"); //获取页面标签名为ul的第一个元素赋给变量ul
left=document.querySelector(".left"); //获取页面class名为left的元素赋给变量left
right=document.querySelector(".right"); //获取页面class名为right的元素赋给变量right
ul.addEventListener("click",dotClickhandler); //给ul变量指向的页面元素添加事件侦听，点击事件
left.addEventListener("click",bnClickHandler); //给left变量指向的页面元素添加事件侦听，点击事件
right.addEventListener("click",bnClickHandler); //给right变量指向的页面元素添加事件侦听，点击事件
prevChange(); //执行prevChange函数
}
function dotClickhandler(e){
if(e.target.nodeName!=="LI") return; //如果目标对象的节点名不为LI，返回 不执行
pos=Array.from(this.children).indexOf(e.target); //当前目标子元素列表转化为数组，查找对应当前目标对象的下标赋给pos变量
changeImage(); //执行changeImage函数
prevChange(); //执行prevChange函数
}
function bnClickHandler(e){
// console.log(pos);
if(this===left){ //如果当前目标对象为left
pos--; //pos变量自减
if(pos<0) pos=4; //如果pos小于0，令pos等于4
}else{ //如果当前目标对象为right
pos++; //pos自加
if(pos>4) pos=0; //如果pos大于4，pos等于0
}
changeImage(); //执行changeImage函数
prevChange(); //执行prevChange函数
}
function prevChange(){
if(prev){
prev.style.backgroundColor="rgba(255,0,0,0)"; //如果变量prev值存在，将prev指向的页面元素的css样式的背景颜色属性更改
}
prev=ul.children[pos]; //变量prev指向页面元素：ul子元素列表中以变量pos作为下标的元素
prev.style.backgroundColor="#FF9d00"; //元素样式改变
}
function changeImage(){
imgCon.style.left=-pos*1350+"px"; //变量imgCon对应的页面元素的css样式中left属性值根据变量pos改变，1350px为一张图片的宽度
}
轮播图8
/*css样式*/
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=false,
time=200,
direction = "left";
init(); //函数式编程 执行
function init() {
var carousel = document.createElement("div"); //声明变量carousel，在dom中创建一个div元素赋给变量carsouel
carousel.className = "carousel"; //定义carousel的class名为carsouel
createImgCon(carousel); //执行函数createImgCon，将carsouel作为参数传入
createDot(carousel); //执行函数carousel，将carsouel作为参数传入
createBn(carousel); //执行函数carouBn，将carsouel作为参数传入
document.body.appendChild(carousel); //将carsouel作为子节点置入body标签中
prevChange(); //执行prevchange函数
animation(); //执行animation函数
carousel.addEventListener("mouseenter",mouseHandler); //添加事件侦听，鼠标移入事件
carousel.addEventListener("mouseleave",mouseHandler); //添加事件侦听，鼠标移出事件
}
function mouseHandler(e){
autoBool=e.type==="mouseleave"; //当前目标对象类型为鼠标离开时，autoBool为真，类型鼠标进入时为假
time=200; //time为200
}
function createImgCon(parent) {
imgCon = document.createElement("div"); //声明变量imgCon，dom创建div元素，赋给imgCon
imgCon.className = "imgCon"; //class名赋予
imgCon.appendChild(getItem(title[0])); //将数组title的第0项元素作为参数传入getItem函数执行，并将返回值作为子节点写入imgCon
parent.appendChild(imgCon); //将imgCon作为子节点写入参数对象
}
function createDot(parent) {
ul = document.createElement("ul"); //声明变量，获取元素赋予
ul.innerHTML = title.reduce((value, item) => { //ul中创建与item同数的li标签
return value + "<li></li>";
}, "");
ul.addEventListener("click", dotClickhandler); //ul添加侦听事件，点击事件
parent.appendChild(ul); //将ul作为子节点写入参数对象子节点尾部
}
function createBn(parent) {
var src = ["left", "right"]; //声明变量src数组，元素为左和右
src.forEach((item) => { //遍历src数组
var img = new Image(); //声明变量img为新的Image对象
img.src = `./img/${item}.png`; //模板字面量里昂写入img的src属性
img.className = item; //class命名
parent.appendChild(img); //img作为子节点加入参数对象
img.addEventListener("click", bnClickHandler); //img添加侦听事件，点击事件
});
}
function getItem(o) {
if (itemList[o.id]) return itemList[o.id]; //如果对象itemList中以参数o的id属性作为键名的键值对存在，返回该键值对
var div = document.createElement("div"); //声明变量div，dom创建div元素
div.className = "item"; //class名命名
var arr = o.date.split(/(?=\/)/); //参数o的date属性通过正则分割为两个字符串组成的数组，并传给数组
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>
`; //模板字面量写入div
itemList[o.id] = div; //将div作为值，参数的id属性作为健写入itemlist对象，
return div; //返回div
}
function dotClickhandler(e) {
if (e.target.constructor !== HTMLLIElement) return; //如果当前目标对象不是标签元素，返回 不执行
var index = Array.from(ul.children).indexOf(e.target); //将ul的子节点列表转化为数组，查找对应当前目标对象的下标并返回赋值给变量index
if (index === pos) return; //如果index与pos相等，返回 不执行
if (index > pos) direction = "left"; //如果，index大于pos，direction赋值为left字符串
else direction = "right"; //index小于pos则direction赋值为字符串right
pos = index; //将index赋值给pos
insertNextImg(); //执行函数insertNextImg
}
function bnClickHandler(e) {
if (this.src.includes("left")) { //如果当前目标对象src属性中包含字符串left
direction = "right"; //direction赋值为right
pos--; //pos自减
if (pos < 0) pos = title.length - 1; //pos小于0时，等于title最后一位元素下标
} else { //如果当前目标对象src属性中包含字符串right
direction = "left"; //direction赋值为left
pos++; //pos自加
if (pos > title.length - 1) pos = 0; //如果pos大于title最大下标值，pos置0
}
insertNextImg(); //执行insertImage函数
}
function insertNextImg() {
if (direction === "left") { //如果direction值为left
imgCon.appendChild(getItem(title[pos])); //将pos作为键名传入title查找对应值，将值作为参数传入getItem函数执行，将返回值作为子节点写入imgCon的子节点尾部
x = 0; //x值赋0
imgCon.style.left = x + "px"; //imgCon的css样式中left属性赋值
} else { //如果direction值为right
imgCon.insertBefore(getItem(title[pos]), imgCon.firstElementChild); //将pos作为键名传入title查找对应值，将值作为参数传入getItem函数执行，将返回值作为子节点插入imgCon的子节点头部
x = -WIDTH; //x = -1350
imgCon.style.left = x + "px"; //imgCon的css样式中left属性赋值
}
bool=true; //bool赋值为true
prevChange(); //执行prevchange函数
}
function animation(){
requestAnimationFrame(animation); //动画帧请求
imgMove(); //执行imgMove函数
autoPlay(); //执行autoPlay函数
}
function autoPlay(){
if(!autoBool) return; //如果autoBool为false，返回 不执行
time--; //time自减
if(time>0) return; //time大于0时，返回
time=200; //time为200
var evt=new MouseEvent("click"); //声明变量evt为新鼠标事件click
document.querySelector(".right").dispatchEvent(evt); //获取right元素，抛发事件evt
}
function imgMove(){
if(!bool) return; //bool值为false时，返回 不执行
if(direction==="left"){ //direction值为left时
x-=speed; //x自减speed
if(x<=-WIDTH){ //x小于等于-1350时
imgCon.firstElementChild.remove(); //删除imgCon的第一个子元素
x=0; //x置0
bool=false; //bool值为false
}
}else{ //direction值为right时
x+=speed; //x自加speed
if(x>=0){ //x大于等于0时
imgCon.lastElementChild.remove(); //删除imgCon的最后一个子元素
x=0; //x置0
bool=false; //bool值为false
}
}
imgCon.style.left=x+"px"; //样式修改
}
function prevChange(){
if(prev){ //prev存在，则prev对应的页面元素的css样式中背景颜色更改
prev.style.backgroundColor="rgba(255,0,0,0)";
}
prev=ul.children[pos]; //将ul子节点列表中以pos为下标的对应元素赋给prev
prev.style.backgroundColor="#FF9d00"; //样式修改
}
扫一扫
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
