过渡式轮播图

小青龙8085

已于 2023-02-15 09:35:53 修改

阅读量1.3k

点赞数 1

分类专栏：寒假前端文章标签： css css3 html

于 2020-02-10 20:58:51 首次发布

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104253390

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

效果图：（制作不易，多谢支持）

寒假里因为新型肺炎的事情不敢出门，虽然整天呆在家里，但我感觉也并不是那么无聊，可能我真的比较宅吧，话说回来这么长时间什么也不干也不太好，所以就利用这宝贵的时间学点知识。其实在还没放假的时候就已经做好了好好学习的打算，到今天也差不多坚持了快一个月了，虽然上午基本上是用睡觉度过的，但感觉通过这些天的学习还是收获了许多。

今天这个案例是做轮播图，其实早就想做这个东西了，之前都是用的别人的，在做之前感觉挺复杂的。做完之后感觉并不是那么难。至少对于我这个轮播。

下面就讲一下我做这个轮播的时候的步骤和想法。

首先html和css方面就不多说了，主要说下js这里，这个案例用的是原生的js，没有用什么框架。

轮播图最重要的就是图片的切换，所以图片切换做好了其他就简单了。在刚开始做的时候，打算用设置固有属性className的方法，但是后来发现用这个的话会替换掉原来类，这可不行，所以我用node.className+="类名"；这个方式，这个方法虽然没有替换掉原来的类，但是每添加一次类标签上的类名就多了一个，而且这些标签上的类名只会增加不会减少，并且采用这种方法的话需要添加好几个类，所以就放弃这种方法了。

然后决定用node.style.“属性”=“值”；的方法，发现这种方法还挺方便。但是再写这块js的时候添加了太多CSS里面的定位和转换，搞得逻辑特别混乱，就像这样

定位和转换分开用还会，但是一块用就有点摸不着头脑了，所以我做了一个小demo，来测试一下他们一起用的话到底是什么样的。

html：

                <div class="box">
			<div class="sunbox " id="btn"></div>
		</div>

css：

		<style>
			.box{
				width: 800px;
				height: 800px;
				border: 1px solid red;
				margin: 0 auto;
				position: relative;
			}
			.sunbox{
				width: 200px;
				height:200px;
				background: darkblue;
				position: absolute;
				left: -100px;
				transform: translateX(200px);
				transition: 1s;
			}
		</style>

js：

		<script>
			var btn=document.getElementById("btn");
			btn.addEventListener("click",function(){
				this.style.left="-200px"
				this.style.transform="translateX(0px)";
			})
		</script>

有两个div，外边是一个宽高都为800px的红色边框的盒子，并加了相对定位（如果对定位不太懂的话可以去我的博客里面康康）。内层div是一个背景为蓝色的宽高200px的盒子，并添加了绝对定位，定位在left：-100px；并且沿x轴移动了200px，也就是现在的位置。

当点击蓝色的div的时候，改变了两个属性，

this.style.left="-200px"
this.style.transform="translateX(0px)";

然后变成了这样。发现盒子从上个位置移到了下面图片这个位置。

所以，我得出结论，点击盒子改变的两个属性，并不是使盒子直接在left：-200px；的位置移动0px；而是从点击前的位置移到

this.style.left="-200px"
this.style.transform="translateX(0px)";

这两个属性所决定的盒子的最终位置。

就是：（错误的）起始位置：left：-200px ；最终位置：left：-200px；移动0px；

（正确的）起始位置：left：left：-100px；水平移动200px；最终位置：left：-200px ；移动0px；

理解了这个做这个轮播图就好多了。

方法：

我将轮播的切换分成了三块，第一块是当前显示的轮播（left：0px；）；第二块是将要进入的轮播（left：-1200px；从左进入，图片宽度1200px）；第三块是退出的轮播（left：1200px）；

当前显示的轮播：

pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="0px";
pics[idx].style.zIndex="3";

触发某个事件之后这个图片在水平方向上移动1200px。

将要进入的轮播：


pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="-1200px";
pics[idx].style.zIndex="3";

这个轮播图是在当前显示的轮播的左边，同时向右移动1200px。

退出的轮播：

pics[n].style.zIndex="2";
pics[n].style.transform="translateX(0px)";
pics[n].style.left="-1200px";
pics[n].style.transition="0s";

这个轮播图是在当前显示的轮播的右边，同时把他移到将要进入的轮播的位置。意思就是，当当前显示的轮播图退出之后要将其下一张定位回到“将要进入的轮播图这个位置”，因为如果不这样做，在left：1200px；位置的轮播图是无法一下子从第二快的位置移到第三块的位置，就像上面举得案例。

在做的时候还遇到了第一次点击切换轮播的时候，会看见第三部分的轮播移动到第二部分的情景，这个时候就需要调第一二个图片的z-index属性，我在CSS里面把前两个图片的z-index挑的比其他的高点。这样就可以了。

完整代码（制作不易，多谢支持）

html：

<!DOCTYPE >
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div class="header">
			<!--主菜单-->
			<div class="menu">
				<ul>
					<li id="0">手机配件<span id="0">&#xe665;</span></li>
					<li id="1">家用电脑<span id="1">&#xe665;</span></li>
					<li id="2">电器<span id="2">&#xe665;</span></li>
					<li id="3">家具<span id="3">&#xe665;</span></li>
				</ul>
			</div>
			<!--副菜单-->
			<div class="sub-menu">
				<div class="inner-box">
					<div class="title">手机配件</div>
					<div class="sub-row">
						<span class="b">手机配件：</span>
						<a href="">手机壳</a>
						<span >/</span>
						<a href="">手机存储卡</a>
						<span >/</span>
						<a href="">数据线</a>
						<span>/</span>
						<a href="">充电器</a>
						<span>/</span>
						<a href="">电池</a>
					</div>
					<div class="sub-row">
						<span class="b">手机配件：</span>
						<a href="">手机壳</a>
						<span >/</span>
						<a href="">手机存储卡</a>
						<span >/</span>
						<a href="">数据线</a>
						<span>/</span>
						<a href="">充电器</a>
						<span>/</span>
						<a href="">电池</a>
					</div>
				</div>
				<div class="inner-box">
					<div class="title">手机配件</div>
					<div class="sub-row">
						<span class="b">手机配件：</span>
						<a href="">手机壳</a>
						<span >/</span>
						<a href="">手机存储卡</a>
						<span >/</span>
						<a href="">数据线</a>
						<span>/</span>
						<a href="">充电器</a>
						<span>/</span>
						<a href="">电池</a>
					</div>
				</div>
				<div class="inner-box"></div>
				<div class="inner-box"></div>
			</div>
			<!--轮播图-->
			<div class="banner">
				<a href="#">
					<div class="banner-slide slide1 "></div>
				</a>
				<a href="#">
					<div class="banner-slide slide2"></div>
				</a>
				<a href="#">
					<div class="banner-slide slide3"></div>
				</a>
				<a href="#">
					<div class="banner-slide slide4"></div>
				</a>
				<a href="#">
					<div class="banner-slide slide5"></div>
				</a>
			</div>
			<div class="pre button"></div>
			<div class="end button"></div>
			<div class="dots">
				<span id="0" class="active"></span>
				<span id="1"></span>
				<span id="2"></span>
				<span id="3"></span>
				<span id="4"></span>
			</div>
		</div>
		
		
		
						
		<script src="index.js"></script>
	</body>
</html>

CSS：

*{
	margin: 0;
	padding: 0;
}

@font-face {font-family: 'iconfont';
    src: url('img/font/iconfont.eot'); 
    src: url('img/font/iconfont.eot') format('embedded-opentype'),
    url('img/font/iconfont.woff') format('woff'),
    url('img/font/iconfont.ttf') format('truetype'),
    url('img/font/iconfont.svg#iconfont') format('svg');
}
a{
	text-decoration: none;
	color: #14191e;
}
.header{
	width: 1200px;
	height: 460px;
	margin: 30px auto;
	position: relative;
	overflow: hidden;
}
.banner{
	width: 1200px;
	height: 460px;
	overflow: hidden;
	position: relative;
	left: 0;
	top: 0;
}
.bannerChange{
	transform: translateX(1200px);
	transition: 1s;
}
.bannerChange1{
	transform: translateX(1200px);
	transition: 1s;
	left: 1200px;
	top: 0;
}
.banner-slide{
	width: 1200px;
	height: 460px;
	float: left;
	position: absolute;
	top: 0px;
}

.banner .slide1{
	background: url("img/1.jpg");
	/*left: -1200px;*/
	z-index: 3;
}

 .banner .slide2{
	background: url("img/3.jpg");
	/*left: 1200px;*/
	z-index: 2;
}
.banner .slide3{
	background: url("img/4.jpg");
	/*left: 0px;*/
	z-index: 1;
}
.banner .slide4{
	background: url("img/bg1.jpg");
	/*left: 0px;*/
	z-index: 1;
}
.banner .slide5{
	background: url("img/bg2.jpg");
	/*left: 0px;*/
	z-index: 1;
}
/*前后图片按钮*/
.button{
	width: 40px;
	height: 80px;
	background: url("img/arrow.png") center center no-repeat;
	position: absolute;
	z-index: 5;
}
.pre{
	left: 220px;
	top: 50%;
	margin-top:-15px;
	transform: rotate(180deg);
}
.end{
	right: 10px;
	top: 50%;
	margin-top:-15px;
}
.button:hover{
	background-color:#333;
	opacity: 0.8;
	filter:alpha(opacity=80);
}
/*轮播点*/
.dots{
	z-index: 5;
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.dots span{
	display: inline-block;
	width: 12px;
	height: 12px;
	background-color: rgba(7, 17, 27, 0.4);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
	border-radius: 50%;
	margin-left: 7px;
}
span.active{
	box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
	background-color: #ffffff;
}
/*主菜单*/
.menu{
	z-index: 5;
	width: 190px;
	height: 460px;
	position: absolute;
	top: 0;
	left: 0;
	background:rgba(7, 17, 27, 0.5);
	padding: 10px 0px 0px 20px;
}

.menu ul li{
	width: 100%;
	height: 64px;
	line-height: 64px;
	font-size: 16px;
	list-style: none;
	cursor: pointer;
	/*border-bottom:1px solid rgba(255, 255, 255, 0.2) ;*/
	color: #fff;
	padding-left: 20px;
	border-radius:7px 0 0 7px;
	box-sizing: border-box;
	position: relative;
}
.menu ul li:hover{
	background: rgba(0,0,0,0.3);
	
}

.menu li span{
	font-size: 24px;
	color: rgba(255,255,255,0.5);
	font-style: normal;
    font-weight: normal;
	font-family:"iconfont";
	position: absolute;
	top: 0px;
	right: 10px;
}
/*二级菜单*/
.sub-menu{
	height: 460px;
	width: 630px;
	position: absolute;
	top: 0;
	left: 210px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
	z-index: 5;
}
.inner-box{
	display: none;
	height: 460px;
	width: 630px;
	padding-left: 30px;
	background:url(img/fe.png) no-repeat;
	padding-top:28px ;
}
.title{
	color: #f01414;
	font-size: 16px;
	line-height: 16px;
	/*margin-top: 28px;*/
	font-weight: bold;
	margin-bottom: 30px;
}
.sub-row{
	margin-bottom:25px;
	
}
.sub-row .b{
	font-weight: bold;
}

JS ：

var idx=0;//当前转到那个轮播图
var num=document.getElementsByClassName("banner-slide").length;//轮播图数量
var pics=document.getElementsByClassName("banner-slide");//图片集

addId();//给轮播图片添加id序号
clickBtn();//点击按钮轮播
autoplay();//自动轮播
subment();//二级菜单显示
//跨浏览器添加和移除事件
function addHandler(element,type,handler){//定义事件
	if(element.addEventListener){
		element.addEventListener(type,handler,false);
	}
	else if(element.attachEvent){
		element.attachEvent("on"+type,handler);
	}
	else{
		element["on"+type]=null;
	}
}
function removeHandler(element,type,handler){//移除事件
	if(element.removeEventListener){
		element.removeEventListener(type,handler,false);
	}
	else if(element.detachEvent){
		element.detachEvent("no"+type,handler);
	}
	else{
		element["no"+type]=null;
	}
}

//给图片添加自定义属性Data-id
function addId(){
	for(var i=0;i<num;i++){
		pics[i].setAttribute("dataId",i);
	}
}
//点击按钮切换轮播图
function clickBtn(){
	var btn1=document.getElementsByClassName("pre");
	var btn2=document.getElementsByClassName("end");
	addHandler(btn1[0],"click",function(){//前
		pics[idx].style.transform="translateX(1200px)";
		pics[idx].style.transition="1s";
		pics[idx].style.left="0px";
		pics[idx].style.zIndex="3";
		idx++;
		if(idx<0){
			idx=num-1;
		}else if(idx>=num){
			idx=0;
		}
		pics[idx].style.transform="translateX(1200px)";
		pics[idx].style.transition="1s";
		pics[idx].style.left="-1200px";
		pics[idx].style.zIndex="3";
		var n;
		if(idx+1>=num){
			n=0;			
		}
		else{
			n=idx+1;
		}
		pics[n].style.zIndex="2";
		pics[n].style.transform="translateX(0px)";
		pics[n].style.left="-1190px";
		pics[n].style.transition="0s";
		dot();
	})

	addHandler(btn2[0],"click",function(){//后
		pics[idx].style.transform="translateX(-1200px)";
		pics[idx].style.transition="1s";
		pics[idx].style.left="0px";
		pics[idx].style.zIndex="3";
		idx--;
		if(idx<0){
			idx=num-1;
		}else if(idx>=num){
			idx=0;
		}
		pics[idx].style.transform="translateX(-1200px)";
		pics[idx].style.transition="1s";
		pics[idx].style.left="1200px";
		pics[idx].style.zIndex="3";
		var n;
		if(idx-1<0){
			n=num-1;			
		}
		else{
			n=idx-1;
		}
		pics[n].style.zIndex="1";
		pics[n].style.transform="translateX(0px)";
		pics[n].style.left="1190px";
		pics[n].style.transition="0s";
		dot();
	})
	
}
//点击pre按钮切换轮播图
function pre(){
		pics[idx].style.transform="translateX(1200px)";
		pics[idx].style.transition="1s";
		pics[idx].style.left="0px";
		pics[idx].style.zIndex="3";
		idx++;
		if(idx<0){
			idx=num-1;
		}else if(idx>=num){
			idx=0;
		}
		pics[idx].style.transform="translateX(1200px)";
		pics[idx].style.transition="1s";
		pics[idx].style.left="-1200px";
		pics[idx].style.zIndex="3";
		var n;
		if(idx+1>=num){
			n=0;			
		}
		else{
			n=idx+1;
		}
		pics[n].style.zIndex="1";
		pics[n].style.transform="translateX(0px)";
		pics[n].style.left="-1190px";
		pics[n].style.transition="0s";
		dot();
}
//点高亮
function dot(){
	var dots=document.getElementsByClassName("dots")[0].children;
	var n=dots.length;
	for(var i=0;i<n;i++){
		if(i==idx){	
			dots[i].className="active";
		}
		else{
			dots[i].className="";
		}
	}		

}

//自动轮播
function autoplay(){
	var a=setInterval("pre()",3000);
}

//二级菜单显示
function subment(){
	var ment=document.getElementsByTagName("ul")[0];
	var subBox=document.getElementsByClassName("sub-menu")[0].children;
	var subBoxs=document.getElementsByClassName("sub-menu")[0];
	addHandler(ment,"mouseover",function(event){
		var m=event.target.id;
		subBox[m].style.display="block";
		
		addHandler(subBox[m],"mouseover",function(){
		subBox[m].style.display="block";
		})	
		
		addHandler(subBox[m],"mouseout",function(){
		subBox[m].style.display="none";
		})
	},true)
	addHandler(ment,"mouseout",function(event){
		var m=event.target.id;
		subBox[m].style.display="none";
		
	})	
	
}

小青龙8085

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过渡式轮播图

效果图：（制作不易，多谢支持）寒假里因为新型肺炎的事情不敢出门，虽然整天呆在家里，但我感觉也并不是那么无聊，可能我真的比较宅吧，话说回来这么长时间什么也不干也不太好，所以就利用这宝贵的时间学点知识。其实在还没放假的时候就已经做好了好好学习的打算，到今天也差不多坚持了快一个月了，虽然上午基本上是用睡觉度过的，但感觉通过这些天的学习还是收获了许多。今天这个案例是做轮播图，其实早就想做这个...
复制链接

扫一扫

专栏目录