javascript轮播特效 渐隐渐显 3D版

墨林陌
491 阅读4分钟

动画版

效果图

pbl01 00_00_00-00_00_30.gif

html代码

<!DOCTYPE html>
<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>

css代码

.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.3s;
}
.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;
}

js代码

(function(){
	let wrapper=document.querySelector(".wrapper");
	let bannerBox=document.getElementById("bannerBox");
	let count=4;//图片的个数
	let timer=null;//定时器
	let w=bannerBox.offsetWidth;//每次图片移动的宽度
	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();
	
	//自动轮播
	function autoPlay(){
		step++;
		if(step>count-1){
			wrapper.style.transitionDuration="0s";
			wrapper.style.left=`0px`;
			step=1;
			wrapper.offsetWidth;
		}
		wrapper.style.transitionDuration="0.3s";
		wrapper.style.left=`-${step*w}px`;
		paginationfocus();
	}
	//小圆点获取焦点
	function paginationfocus(){
		let temp=step;
		if(temp===count-1){
			temp=0;
		}
		paginationlist.forEach((item,index)=>{
			if(index===temp){
				item.className="active";
				return;
			}
			item.className="";
		})
	}
	//添加点击功能
	bannerBox.onclick=function(e){
		let tar=e.target;
		let cName=tar.className;
		let tagN=tar.tagName;
		if(tagN==="SPAN"){
			//console.log("小圆点");
			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")){//左
				step--;
				if(step<0){
					wrapper.style.transitionDuration="0s";
					wrapper.style.left=`-${(count-1)*w}px`;
					step=count-2;
					wrapper.offsetWidth;
				}
				wrapper.style.transitionDuration="0.3s";
				wrapper.style.left=`-${step*w}px`;
				paginationfocus();
			}else{
				autoPlay();
			}
		}
	}
	//自动轮播启动
	timer=setInterval(autoPlay,1000);//启动定时器
    bannerBox.onmouseenter=function(){
		clearInterval(timer);
		timer=null;
	}
	bannerBox.onmouseleave=function(){
		timer=setInterval(autoPlay,1000);
	}
	
})()

data.json代码

[{
    "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"
}]

渐隐渐显

效果图

pbl02 00_00_00-00_00_30.gif

html代码

<!DOCTYPE html>
<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>

css代码

.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.3s;
}
.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.3s;
}
.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;
}

js代码

(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");
	}
	//自动轮播
	let autoplay=function autoplay(){
		step++;
		if(step>count-1){
			step=0;
		}
		toggleimg(step);
	}
	//切换图片 和 小圆点
	let toggleimg=function toggleimg(step){
		slides.forEach((item,index)=>{
			if(index==step){
				item.className="slide active";
			}else{
				item.className="slide";
			}
		})
		paginationfocus(step);
	}

    //分页器切换效果
    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);
	
	//左右按钮点击 和 分页器点击
	bannerBox.onclick=function(e){
		let target=e.target;
		let TagName=target.tagName;
		let cName=target.className;
		if(TagName==="SPAN"){//分页器
		    let index=+target.getAttribute("index");
			toggleimg(index);
			return;
		}
		if(TagName==="DIV"&&cName.includes("navigation")){
			 if(cName.includes("prev")){//左按钮
				 step--;
				 if(step<0){
					step=count-1;
				 }
				 toggleimg(step);
			 }else{
				 //右按钮，跟自动轮播一样
				 autoplay()
			 }
			
		}
	}
	
	getdata();
	binding();
	timer=setInterval(autoplay,3000);
	
})()

3D

效果图

pbl3d 00_00_00-00_00_30.gif

html代码

<!DOCTYPE html>
<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>蒙奇·D·路飞</p>
							<p>身份:草帽海贼团船长</p>
							<p>梦想:找到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>

css代码

.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.3s;
}
.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.3s;
	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;
}

js代码

(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;//默认刚开始显示第一张
	let count=0;// 默认图片数量为0
	let timer=null;
	//获取数据
	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);
	}
	//页面初始化加载
	let binding=function binding(flag){
		//1.刚开始判断一下图片的数据是否能超过5张，超不过就给补充
		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. 先给data数据做一下处理，
		//给每条数据增添一个 className, z-index translate scale 
		let temp1=step-2;
		let temp2=step-1;
		let temp3=step;//正中间这一项
		let temp4=step+1;
		let temp5=step+2;
		//假设 step 为 0
		if(temp1<0){temp1=count+temp1;}
		if(temp2<0){temp2=count+temp2;}
		//假设 step 为最大值
		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.自动轮播，如果不是第一次，只需要修改样式就是，不需要重新渲染
		if(!flag){
			data.forEach((item,index)=>{
				let {className,sty}=item;
				slides[index].className=className;
				slides[index].style.cssText=sty;
			})
			return;
		}
		
		//3. 数据处理好后，将数据循环到页面上
		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.获取slides
		slides=wrapper.querySelectorAll(".slide");
	}
	//自动轮播
	let autoplay=function autoplay(){
		step++;
		if(step>=count){
			step=0;
		}
		binding();
	}
	
	//鼠标滑过自动轮播
	container.addEventListener("mouseenter",()=>{
		clearInterval(timer);
		timer=null;
	})
	container.addEventListener("mouseleave",()=>{
		timer=setInterval(autoplay,1000)
	})
	
	//左右点击按钮切换图片
	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")){//左
				step--;
				if(step<0){
					step=count-1;
				}
				binding();
			}else{//右
				autoplay()
			}
		}
	})
	

	getdata();
	binding(true);
	timer=setInterval(autoplay,1000)
	
})()

data.json代码

[{
    "id": 1,
    "pic": "images/01.jpg",
    "descript": {
        "name": "蒙奇·D·路飞",
        "identity": "草帽海贼团船长",
        "dream": "找到ONE PIECE，并成为海贼王"
    }
}, {
    "id": 2,
    "pic": "images/02.jpg",
    "descript": {
        "name": "罗罗诺亚·索隆",
        "identity": "草帽海贼团战斗员",
        "dream": "世界第一大剑豪"
    }
}, {
    "id": 3,
    "pic": "images/03.jpg",
    "descript": {
        "name": "“小贼猫”娜美",
        "identity": "草帽海贼团航海士",
        "dream": "绘制出自己的世界地图、绘制全世界的航海图"
    }
}, {
    "id": 4,
    "pic": "images/04.jpg",
    "descript": {
        "name": "“GOD”▪乌索普",
        "identity": "草帽海贼团狙击手",
        "dream": "成为勇敢的海上战士"
    }
}, {
    "id": 5,
    "pic": "images/05.jpg",
    "descript": {
        "name": "“黑足”山治",
        "identity": "草帽海贼团厨师",
        "dream": "寻找传说中的奇迹之海－ALL BLUE"
    }
}, {
    "id": 6,
    "pic": "images/06.jpg",
    "descript": {
        "name": "托尼托尼·乔巴",
        "identity": "草帽海贼团船医",
        "dream": "成为万能药"
    }
}, {
    "id": 7,
    "pic": "images/07.jpg",
    "descript": {
        "name": "“改造人”弗兰奇",
        "identity": "草帽海贼团船工",
        "dream": "制造出梦想之船"
    }
}, {
    "id": 8,
    "pic": "images/08.jpg",
    "descript": {
        "name": "“鼻歌”&“灵魂之王”布鲁克",
        "identity": "草帽海贼团音乐家",
        "dream": "环绕世界一周到伟大航道双子岬跟伙伴鲸鱼“拉布”重逢"
    }
}, {
    "id": 9,
    "pic": "images/09.jpg",
    "descript": {
        "name": "“恶魔之子”妮可·罗宾",
        "identity": "草帽海贼团考古学家",
        "dream": "在历史正文碑的指引下，到达伟大航道的尽头“拉夫德鲁”"
    }
}]

reset.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.25em}sup{top:-0.5em}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}

images文件

链接：pan.baidu.com/s/1FQb0zD4W… 提取码：3mq6

avatar
文章
阅读
粉丝