animated
rendering
The HTML code
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/reset.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container" id="bannerBox">
<div class="wrapper">
<! -- <div class="slide"><img src="./images/banner01.png" alt=""></div> <div class="slide"><img src="./images/banner02.jpg" alt=""></div> <div class="slide"><img src="./images/banner03.png" alt=""></div> <div class="slide"><img src="./images/banner01.png" alt=""></div> -->
</div>
<div class="pagination">
<! -- <span class="active" index="0"></span> <span index="1"></span> <span index="2"></span> -->
</div>
<div class="navigation prev"></div>
<div class="navigation next"></div>
</div>
<script src="js/lun.js"></script>
</body>
</html>
Copy the codeCSS code
.container{
width:1000px;
/* border:1px solid red; * /
margin:50px auto;
height:400px;
position:relative;
overflow:hidden;
}
.container .wrapper{
/* width:400%; * /
display: flex;
height:400px;
position:absolute;
left:0;
top:0;
transition: left 0.3 s;
}
.container .wrapper .slide..container .wrapper img{
width:1000px;
height:400px;
float:left;
}
.pagination{
padding:5px 5px;
background-color: rgba(255.255.255.0.5);
border-radius:15px;
position: absolute;
bottom:30px;
left:50%;
transform: translateX(-50%);
}
.pagination span{
display: inline-block;
padding:5px;
margin:0px 8px;
border-radius: 50%;
background-color: # 000000;
}
.pagination span.active{
background-color: chocolate;
}
.navigation{
height:79px;
width:39px;
background-color: rgba(245.245.245.0.7);
background: url(../images/btn.png) no-repeat;
position: absolute;
top:50%;
transform: translateY(-50%);
}
.prev{
left:0;
}
.next{
background-position: -39px 0px;
right:0;
}
Copy the codeJs code
(function(){
let wrapper=document.querySelector(".wrapper");
let bannerBox=document.getElementById("bannerBox");
let count=4;// The number of images
let timer=null;/ / timer
let w=bannerBox.offsetWidth;// The width of each image move
let step=0;
let paginationlist=null;
let pagination=document.querySelector(".pagination");
function render(){
let data=[];
let xhr=new XMLHttpRequest;
xhr.open("GET"."./data.json".false);
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
data=JSON.parse(xhr.responseText);
}
}
xhr.send(null);
console.log(data);
let stra="";
let strb="";
data.forEach((item,index) = >{
let {pic}=item;
stra+=`<div class="slide"><img src="${pic}" alt=""></div>`;
strb+=`<span class="${index==0?'active':' '}" index="${index}"></span>`;
})
stra+=`<div class="slide"><img src="${data[0].pic}" alt=""></div>`;
wrapper.innerHTML=stra;
pagination.innerHTML=strb;
count=data.length+1;
paginationlist=document.querySelectorAll(".pagination span");
}
render();
// automatic rotation
function autoPlay(){
step++;
if(step>count-1){
wrapper.style.transitionDuration="0s";
wrapper.style.left=`0px`;
step=1;
wrapper.offsetWidth;
}
wrapper.style.transitionDuration="0.3 s";
wrapper.style.left=` -${step*w}px`;
paginationfocus();
}
// Small dots get focus
function paginationfocus(){
let temp=step;
if(temp===count-1){
temp=0;
}
paginationlist.forEach((item,index) = >{
if(index===temp){
item.className="active";
return;
}
item.className=""; })}// Add click function
bannerBox.onclick=function(e){
let tar=e.target;
let cName=tar.className;
let tagN=tar.tagName;
if(tagN==="SPAN") {//console.log(" little dot ");
let num=+tar.getAttribute("index");
//if(step===num||(step===count-1&&num===0)) return;
step=num;
wrapper.style.left=` -${num*w}px`;
paginationfocus()
return;
}
if(tagN==="DIV"&&cName.includes("navigation")) {if(cName.includes("prev")) {/ / left
step--;
if(step<0){
wrapper.style.transitionDuration="0s";
wrapper.style.left=` -${(count-1)*w}px`;
step=count-2;
wrapper.offsetWidth;
}
wrapper.style.transitionDuration="0.3 s";
wrapper.style.left=` -${step*w}px`;
paginationfocus();
}else{ autoPlay(); }}}// Automatic rotation start
timer=setInterval(autoPlay,1000);// Start timer
bannerBox.onmouseenter=function(){
clearInterval(timer);
timer=null;
}
bannerBox.onmouseleave=function(){
timer=setInterval(autoPlay,1000);
}
})()
Copy the codeData. The json code
[{
"id": 1."pic": "images/banner01.png"
}, {
"id": 2."pic": "images/banner02.jpg"
}, {
"id": 3."pic": "images/banner03.png"
}, {
"id": 4."pic": "images/banner04.png"
}, {
"id": 5."pic": "images/banner05.png"
}]
Copy the codefade
rendering
The HTML code
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/reset.min.css">
<link rel="stylesheet" href="./css/inout.css">
</head>
<body>
<div class="container" id="bannerBox">
<div class="wrapper">
<! -- <div class="slide active"><img src="./images/banner01.png" alt=""></div> <div class="slide"><img src="./images/banner02.jpg" alt=""></div> <div class="slide"><img src="./images/banner03.png" alt=""></div> <div class="slide"><img src="./images/banner01.png" alt=""></div> -->
</div>
<div class="pagination">
<! -- <span class="active" index="0"></span> <span index="1"></span> <span index="2"></span> -->
</div>
<div class="navigation prev"></div>
<div class="navigation next"></div>
</div>
<script src="./js/inout.js"></script>
</body>
</html>
Copy the codeCSS code
.container{
width:1000px;
/* border:1px solid red; * /
margin:50px auto;
height:400px;
position:relative;
overflow:hidden;
}
.container .wrapper{
width:100%;
height:400px;
}
.container .wrapper .slide..container .wrapper img{
width:1000px;
height:400px;
}
.container .wrapper .slide{
position:absolute;
left:0;
top:0;
z-index:1;
opacity:0;
transition: all 0.3 s;
}
.container .wrapper .slide.active{
opacity:1;
z-index:2;
}
.pagination{
padding:5px 5px;
background-color: rgba(255.255.255.0.5);
border-radius:15px;
position: absolute;
bottom:30px;
left:50%;
transform: translateX(-50%);
z-index:3;
}
.pagination span{
display: inline-block;
padding:5px;
margin:0px 8px;
border-radius: 50%;
background-color: # 000000;
transition: background-color 0.3 s;
}
.pagination span.active{
background-color: chocolate;
}
.navigation{
height:79px;
width:39px;
background-color: rgba(245.245.245.0.7);
background: url(../images/btn.png) no-repeat;
position: absolute;
top:50%;
transform: translateY(-50%);
z-index:3;
}
.prev{
left:0;
}
.next{
background-position: -39px 0px;
right:0;
}
Copy the codeJs code
(function(){
let bannerBox=document.getElementById("bannerBox");
let wrapper=document.querySelector(".wrapper"),
pagination=document.querySelector(".pagination");
let slides=null,paginationlist=null;
let data=[];
let step=0;
let count=0;
let timer=null;
let getdata=function getdata(){
var xhr=new XMLHttpRequest;
xhr.open("GET"."./data.json".false);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
data=JSON.parse(xhr.responseText);
}
}
xhr.send(null);
}
let binding=function binding(){
let stra="",strb="";
data.forEach((item,index) = >{
stra+=`<div class="${index==0?'slide active':'slide'}"><img src="${item.pic}" alt=""></div>`;
strb+=`<span index="${index}" class="${index==0?'active':' '}"></span>`;
})
wrapper.innerHTML=stra;
pagination.innerHTML=strb;
count=data.length;
paginationlist=document.querySelectorAll(".pagination span");
slides=document.querySelectorAll(".wrapper .slide");
}
// automatic rotation
let autoplay=function autoplay(){
step++;
if(step>count-1){
step=0;
}
toggleimg(step);
}
// Toggle images and dots
let toggleimg=function toggleimg(step){
slides.forEach((item,index) = >{
if(index==step){
item.className="slide active";
}else{
item.className="slide";
}
})
paginationfocus(step);
}
// Pager switch effect
let paginationfocus=function paginationfocus(step){
paginationlist.forEach((item,index) = >{
if(index===step){
item.className="active";
return;
}
item.className="";
})
}
bannerBox.onmouseenter=() = >{
clearInterval(timer);
timer=null;
}
bannerBox.onmouseleave=() = >timer=setInterval(autoplay,3000);
// Left and right button clicks and pager clicks
bannerBox.onclick=function(e){
let target=e.target;
let TagName=target.tagName;
let cName=target.className;
if(TagName==="SPAN") {/ / pager
let index=+target.getAttribute("index");
toggleimg(index);
return;
}
if(TagName==="DIV"&&cName.includes("navigation")) {if(cName.includes("prev")) {/ / the left button
step--;
if(step<0){
step=count-1;
}
toggleimg(step);
}else{
// Right button, same as auto rotation
autoplay()
}
}
}
getdata();
binding();
timer=setInterval(autoplay,3000); }) ()Copy the code3D
rendering
The HTML code
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/3d.css">
</head>
<body>
<div class="header">
<div class="container" id="container">
<div class="wrapper">
<! -- <div class="slide active"> <img src="./images/01.jpg" alt=""> <div class="mark"></div> <div class="desc"> < p > p. d. luffy covered < / p > < p > identity: straw hat pirates group captain < / p > < p > dream: to find ONE, and become ONE PIECE < / p > < / div > < / div > -- >
</div>
<div class="navigation prev"></div>
<div class="navigation next"></div>
</div>
</div>
<script src="./js/3d.js"></script>
</body>
</html>
Copy the codeCSS code
.header{
width:100%;
height:380px;
background: url(../images/bg.jpg) no-repeat;
background-size: cover;
border-top: 1px solid transparent;
box-sizing: border-box;
}
.container{
width:1100px;
height:300px;
margin:40px auto;
box-sizing: border-box;
position: relative;
}
.container .wrapper{
height:100%;
position: relative;
}
.container .wrapper .slide{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
z-index:0;
height:100%;
width:25%;
overflow: hidden;
transition: all 0.3 s;
}
.container .wrapper .slide img{
height:100%;
width:100%;
}
.container .wrapper .slide .mark{
background: rgba(0.0.0.75);
width:100%;
height:100%;
position: absolute;
left:0;
bottom:0;
padding:15px;
padding:10px;
box-sizing: border-box;
}
.container .wrapper .slide.active .mark..container .wrapper .slide:hover .mark{
display: none;
}
.container .wrapper .slide .desc{
height:40%;
width:100%;
position: absolute;
left:0;
bottom:0;
background: rgba(0.0.0.75);
box-sizing: border-box;
transform: translateY(100%);
transition: transform 0.3 s;
overflow: hidden;
}
.container .wrapper .slide.active:hover .desc{
transform: translateY(0);
}
.container .wrapper .slide .desc p{
line-height: 2;
color: #FFF;
font-size: 12px;
padding-left:10px;
padding-top:10px;
box-sizing: border-box;
}
.navigation{
height:79px;
width:39px;
background: url(../images/btn.png) no-repeat;
position: absolute;
top:50%;
transform: translateY(-50%);
}
.prev{
left:0;
}
.next{
background-position: -39px 0px;
right:0;
}
Copy the codeJs code
(function(){
let container = document.querySelector('#container');
let wrapper=container.querySelector(".container .wrapper");
let slides=null;
let data=[];
let navPrev = container.querySelector('.navigation.prev'),
navNext = container.querySelector('.navigation.next');
let step=0;// The first image is displayed by default
let count=0;// The default number of images is 0
let timer=null;
// Get data
let getdata=function getdata(){
var xhr=new XMLHttpRequest;
xhr.open("GET"."./3d/data.json".false);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
data=JSON.parse(xhr.responseText);
}
}
xhr.send(null);
}
// The page is initialized to load
let binding=function binding(flag){
//1. Determine if the number of photos can exceed 5 at the beginning, then add more
if (data.length === 0) return;
while (data.length < 5) {
let diff = 5 - data.length,
clone = data.slice(0, diff);
data = data.concat(clone);
}
count = data.length;
//2.
// Add a className, z-index Translate Scale to each entry
let temp1=step-2;
let temp2=step-1;
let temp3=step;// Right in the middle
let temp4=step+1;
let temp5=step+2;
// Assume step is 0
if(temp1<0){temp1=count+temp1; }if(temp2<0){temp2=count+temp2; }// Assume step is the maximum value
if(temp4>count-1){temp4=temp4 - count; }if(temp5>count-1){temp5=temp5 - count; } data=data.map((item,index) = >{
let className="slide";
let zindex=0;
let transform="Translate (50%, 50%) scale (0.55)";
switch (index){
case temp1:
zindex=1;
transform="Translate (195%, 50%) scale (0.7)";
break;
case temp2:
zindex=2;
transform="Translate (130%, 50%) scale (0.85)";
break;
case temp3:
className="slide active";
zindex=3;
transform="translate(-50%,-50%) scale(1)";
break;
case temp4:
zindex=2;
transform="Translate (30%, 50%) scale (0.85)";
break;
case temp5:
zindex=1;
transform = 'translate (95%, 50%) scale (0.7)';
break;
}
item.className=className;
item.sty=`z-index:${zindex}; transform:${transform}; `;
return item;
})
//5. Automatic rotation, if not the first time, only need to modify the style, no need to re-render
if(! flag){ data.forEach((item,index) = >{
let {className,sty}=item;
slides[index].className=className;
slides[index].style.cssText=sty;
})
return;
}
//3. After the data is processed, loop the data to the page
let str="";
data.forEach((item) = >{
let {
className,sty,pic,descript
}=item;
str+=`<div class="${className}" style="${sty}">
<img src="${pic}" alt="">
<div class="mark"></div>
<div class="desc">
<p>${descript.name}</p>
<p>${descript.identity}</p>
<p>${descript.dream}</p>
</div>
</div> `;
})
wrapper.innerHTML=str;
/ / 4. Get slides TAB
slides=wrapper.querySelectorAll(".slide");
}
// automatic rotation
let autoplay=function autoplay(){
step++;
if(step>=count){
step=0;
}
binding();
}
// Mouse over auto rotation
container.addEventListener("mouseenter".() = >{
clearInterval(timer);
timer=null;
})
container.addEventListener("mouseleave".() = >{
timer=setInterval(autoplay,1000)})// Click left and right buttons to switch pictures
container.addEventListener("click".function(e){
let target=e.target;
let tagName=target.tagName;
let classN=target.className;
if(tagName=="DIV"&&classN.includes("navigation")) {if(classN.includes("prev")) {/ / left
step--;
if(step<0){
step=count-1;
}
binding();
}else{/ / right
autoplay()
}
}
})
getdata();
binding(true);
timer=setInterval(autoplay,1000)
})()
Copy the codeData. The json code
[{
"id": 1."pic": "images/01.jpg"."descript": {
"name": "Monkey D. Luffy."."identity": "Captain of the Straw Hat Crew."."dream": "Find ONE PIECE and become ONE PIECE."}}, {"id": 2."pic": "images/02.jpg"."descript": {
"name": "Loronoa Solon."."identity": "Straw-hat Pirate Battler."."dream": "The world's greatest swordsman."}}, {"id": 3."pic": "images/03.jpg"."descript": {
"name": "Nami the thief cat"."identity": "The Crew of Straw Hat Pirates."."dream": "Make your own map of the world, chart the world."}}, {"id": 4."pic": "images/04.jpg"."descript": {
"name": "GOD" -Usop"."identity": "Snipers in straw Hats."."dream": "Be a brave sea warrior."}}, {"id": 5."pic": "images/05.jpg"."descript": {
"name": "Black Foot sanji."."identity": "Chef of the Straw Hat Pirates."."dream": "In search of the legendary Sea of Wonders -ALL BLUE."}}, {"id": 6."pic": "images/06.jpg"."descript": {
"name": "Tony Tony Jabbar."."identity": "Straw hat pirates ship doctor."."dream": "Be the panacea."}}, {"id": 7."pic": "images/07.jpg"."descript": {
"name": "Frankie the Reformed Man."."identity": "The Crew of Straw Hat Pirates."."dream": "Build the boat of your dreams."}}, {"id": 8."pic": "images/08.jpg"."descript": {
"name": "Nose Song" & "Brooke, King of Soul"."identity": "Straw Hat Bandit Musicians."."dream": "Circle the world to twin Point, the great shipping lane, and reunite with fellow whale Rab."}}, {"id": 9."pic": "images/09.jpg"."descript": {
"name": "Nicole Robin, Child of the Devil."."identity": "Archaeologist of the Straw Hat Pirates."."dream": "Follow the guide of the historical text tablet to the end of the great Passage" Lafdrew."}}]Copy the codereset.min.css
body.h1.h2.h3.h4.h5.h6,hr,p.blockquote.dl.dt.dd.ul.ol.li.button.input.textarea.th.td{margin:0;padding:0}body{font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4.h5.h6{font-size:100%}ul.ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover.a:active{outline-width:0;text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{border:0;height:1px}img{border-style:none}img:not([src]) {display:none}svg:not(:root) {overflow:hidden}html{-webkit-touch-callout:none; -webkit-text-size-adjust:100%}input.textarea.button.a{-webkit-tap-highlight-color:rgba(0.0.0.0)}article.aside.details.figcaption.figure.footer.header.main.menu.nav.section.summary{display:block}audio.canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]) {display:none;height:0}progress{vertical-align:baseline}mark{background-color:#ff0;color:# 000}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom: -0.25 em}sup{top: -0.5 em}button.input,select,textarea{font-size:100%;outline:0}button.input{overflow:visible}button,select{text-transform:none}textarea{overflow:auto}button.html [type="button"].[type="reset"].[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}[type="checkbox"].[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset: -2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.clearfix:after{display:block;height:0;content:"";clear:both}
Copy the codeImages file
Link: pan.baidu.com/s/1FQb0zD4W… Extraction code: 3MQ6