javascript学习-封装轮播插件

最新推荐文章于 2024-08-10 16:15:00 发布

加油吧qaq

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量199

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107549676

版权

封装轮播插件

在轮播功能基础上可以进行封装，改进js中Swiper函数，增加原型对象的方法，使得可以将其作为一个对象进行调用，对比原始轮播这样可以更为自由的使用。
共用部分：
swiper.css:

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.swiper{
	width: 1226px;
	height: 460px;
	margin: 0 auto;
	position: relative;
}
.swiper .imgList{
	width: 100%;
	height: 100%;
	position: relative;
}

.swiper>.imgList>.imgItem{
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition:all 0.5s;
}
.swiper>.imgList>.imgItem.active{
	opacity: 1;
}
.swiper .btn.pre{
	width: 80px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	background-color: transparent;
	color: #FFFFFF;
	position: absolute;
	top: calc(50% - 35px);
	font-size: 35px;
	transition: all 0.3s;
}
.swiper .btn.pre:hover{
background-color: rgba(0,0,0,0.6);
}

.swiper .btn.next{
	width: 80px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	background-color: transparent;
	color: whitesmoke;
	position: absolute;
	right: 0;
	top: calc(50% - 35px);
	font-size: 35px;
	transition: all 0.3s;
}
.swiper .btn.next:hover{
	background-color: rgba(0,0,0,0.6);
}
.circleList{
	width: 100%;
	height: 80px;
	display: flex;
	padding: 0 30px;
	justify-content: flex-end;
	align-items: center;
	position: absolute ;
	left: 0;
	bottom: 0;
}
.swiper>.circleList>.circle{
	width: 10px;
	height: 10px;
	border: 2px solid #999999;
	background-color: #666;
	border-radius: 5px;
	margin: 0 5px;
}
.swiper>.circleList>.circle.active{
	background-color: #ccc;
	border: 2px solid #666666;
}

例子1：初级改进
将创建轮播图的各个组件封装进js函数中，只需要传入需要放入的位置，以及图片列表就可以实现创建一个轮播图。
newswiper.js:

function swiper(selector,imgList){
	var swiperDiv=document.querySelector(selector);
	function createSwiperHtml(imgList){
		var imgListDiv=document.createElement("div");
		var circleListDiv=document.createElement("div");
		imgListDiv.className="imgList";
		circleListDiv.className="circleList"
		imgList.forEach(function(item,i){
			if(i==0){
				imgListDiv.innerHTML=imgListDiv.innerHTML+'<div class="imgItem active" style="background-image: url('+item+');"></div>'
				 circleListDiv.innerHTML=circleListDiv.innerHTML+'<div class="circle active" id="c'+i+'"></div>'
			}else{
			imgListDiv.innerHTML=imgListDiv.innerHTML+'<div class="imgItem" style="background-image: url('+item+');"></div>'
		     circleListDiv.innerHTML=circleListDiv.innerHTML+'<div class="circle" id="c'+i+'"></div>'
		}
		})
		swiperDiv.appendChild(imgListDiv);
		swiperDiv.appendChild(circleListDiv);
		swiperDiv.innerHTML+=`<div class="btnList">
				<div class="btn pre"><</div>
				<div class="btn next">></div>
			</div>`
	}
	createSwiperHtml(imgList);
	var btnpre=document.querySelector(selector+" .pre");
	var btnnext=document.querySelector(selector+" .next");
	var imgListDiv=document.querySelectorAll(selector+" .imgItem");
	var circleList=document.querySelectorAll(selector+" .circle")
	var currentImg=0;  //每次点击现在的图片索引加1
	console.log(imgListDiv);
	btnnext.onclick=function(){
		currentImg++;
		if(currentImg>=imgListDiv.length){
			currentImg=0;
		}
		switchImg();
		
	}
	btnpre.onclick=function(){
		currentImg--;
		if(currentImg<0){
			currentImg=imgListDiv.length-1;
		}
		switchImg();
	}
	function switchImg(){
		//初始化，将所有图片的active去掉
		imgListDiv.forEach(function(item,i){
			item.classList.remove("active")
		})
		
		circleList.forEach(function(item,i){
			item.classList.remove("active")
		})
		circleList[currentImg].classList.add("active")
		imgListDiv[currentImg].classList.add("active")
	}
	
	circleList.forEach(function(item,i){
		item.onclick=function(){
			var index=parseInt(item.id[1])-1;
			currentImg=index;         //或者currentImg=i;
			switchImg();
		}
	})
	}

index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<style type="text/css">
			.swiper1{
				width: 600px;
				height: 400px;
				margin: 0 auto;
			}
		</style>
	</head>
	
	<body>
		<div class="swiper swiper1"></div>
		<div class="swiper swiper2"></div>
		<!-- swiper(轮播图生成的位置,图片列表)
		使得在具体某个位置上生成轮播图 -->
		<script type="text/javascript" src="js/newswiper.js"></script>
		<script type="text/javascript">
			var imgList=["img/image1.jpg","img/image2.jpg","img/image3.jpg","img/image4.jpg","img/image5.jpg","img/image6.jpg"]
		     var swiper1=swiper(".swiper1",imgList);
			 var swiper2=swiper(".swiper2",imgList);
		</script>
	</body>
</html>

效果：
在这里插入图片描述
例子2：最终改进版
此改进版本中，将Swiper中的共用函数，放到了原型上，且将其中的临时变量，改变成了Swiper对象的属性。

newswiper_class封装：

class Swiper{
	constructor(selector,imgList) {
	    var swiperDiv=document.querySelector(selector);
	    function createSwiperHtml(imgList){
	    	var imgListDiv=document.createElement("div");
	    	var circleListDiv=document.createElement("div");
	    	imgListDiv.className="imgList";
	    	circleListDiv.className="circleList"
	    	imgList.forEach(function(item,i){
	    		if(i==0){
	    			imgListDiv.innerHTML=imgListDiv.innerHTML+'<div class="imgItem active" style="background-image: url('+item+');"></div>'
	    			 circleListDiv.innerHTML=circleListDiv.innerHTML+'<div class="circle active" id="c'+i+'"></div>'
	    		}else{
	    		imgListDiv.innerHTML=imgListDiv.innerHTML+'<div class="imgItem" style="background-image: url('+item+');"></div>'
	    	     circleListDiv.innerHTML=circleListDiv.innerHTML+'<div class="circle" id="c'+i+'"></div>'
	    	}
	    	})
	    	swiperDiv.appendChild(imgListDiv);
	    	swiperDiv.appendChild(circleListDiv);
	    	swiperDiv.innerHTML+=`<div class="btnList">
	    			<div class="btn pre"><</div>
	    			<div class="btn next">></div>
	    		</div>`
	    }
	    createSwiperHtml(imgList);
	    this.btnpre=document.querySelector(selector+" .pre");
	    this.btnnext=document.querySelector(selector+" .next");
	    this.imgListDiv=document.querySelectorAll(selector+" .imgItem");
	    this.circleList=document.querySelectorAll(selector+" .circle")
	    this.currentImg=0;  //每次点击现在的图片索引加1
	    var that = this;
	    //console.log(imgListDiv);
	    this.btnnext.onclick=function(){
	    	that.forward();
	    	
	    }
	    this.btnpre.onclick=function(){
	    	that.back();
	    }
	    
	    
	    this.circleList.forEach(function(item,i){
	    	item.onclick=function(){
	    		that.go(i);
	    	}
	    })
	}
	   switchImg(){
		
			//初始化，将所有图片的active去掉
			this.imgListDiv.forEach(function(item,i){
				item.classList.remove("active")
			})
			
			this.circleList.forEach(function(item,i){
				item.classList.remove("active")
			})
			this.circleList[this.currentImg].classList.add("active")
			this.imgListDiv[this.currentImg].classList.add("active")
		
	}
	go(index){
		this.currentImg=index;        
		this.switchImg();
	} 
	
	forward(){
		this.currentImg++;
		if(this.currentImg>=this.imgListDiv.length){
			this.currentImg=0;
		}
		this.switchImg();
	}
	back(){
		this.currentImg--;
		if(this.currentImg<0){
			this.currentImg=this.imgListDiv.length-1;
		}
		this.switchImg();
	}
}

index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<style type="text/css">
			.swiper1{
				width: 600px;
				height: 400px;
				margin: 0 auto;
			}
		</style>
	</head>
	
	<body>
		<div class="swiper swiper1"></div>
		<div class="swiper swiper2"></div>
		<!-- swiper(轮播图生成的位置,图片列表)
		使得在具体某个位置上生成轮播图 -->
		<script type="text/javascript" src="js/newswiper_class封装.js"></script>
		<script type="text/javascript">
			var imgList=["img/image1.jpg","img/image2.jpg","img/image3.jpg","img/image4.jpg","img/image5.jpg","img/image6.jpg"]
		    var swiper1=new Swiper(".swiper1",imgList);//构造对象的函数，工厂模式
			//swiper1.go(1)  输入1，就会切换到索引为1的图片
			var swiper2=new Swiper(".swiper2",imgList);//记得new一个对象。这样才能使this为Swiper
		   
		</script>
	</body>
</html>

效果：使用go可以去到想去索引的页面

在这里插入图片描述

加油吧qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-封装轮播插件

封装轮播插件在轮播功能基础上可以进行封装，改进js中Swiper函数，增加原型对象的方法，使得可以将其作为一个对象进行调用，对比原始轮播这样可以更为自由的使用。共用部分：swiper.css:*{ margin: 0; padding: 0; box-sizing: border-box;}.swiper{ width: 1226px; height: 460px; margin: 0 auto; position: relative;}.swiper .imgList{
复制链接

扫一扫