原生JavaScript封装和开发插件方法，手写一个大图切换插件

最新推荐文章于 2023-09-05 21:56:43 发布

qq236710052

最新推荐文章于 2023-09-05 21:56:43 发布

阅读量120

点赞数

分类专栏：前端 JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/qq236710052/article/details/108063699

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

前面我写过一篇jQuery封装和开发插件方法，现在我将使用同样的dom和style用原生JS写，思路并没有区别，只是原生js获取dom节点稍微繁琐一些，也可以看看我用jQuery写的那篇，点击前往。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Banner</title>
<body>
<style>
body{margin:0px;}
ul{list-style:none;margin:0px; padding:0px;}
.banner {width:100%;height:482px;overflow:hidden;position:relative;}
.banner ul li{display:none;}
.banner ul li img{ width:100%;}
.banner_btn_left,.banner_btn_right{font-size:20px;position:absolute;z-index:999;background:#ffffff;top:50%;margin-top:-25px;cursor:pointer;text-align:center;}
.banner_btn_left{left:0px;}
.banner_btn_right{right:0px;}
.banner_page{position:absolute;bottom:20px;width:100%;}
.banner_page dl{ margin:0 auto;text-align:center;}
.banner_page dl dt{display:inline-block; width:50px; height:6px; background:#CCC; margin:0 10px; cursor:pointer;}
.banner_page dl dt.dian{background:#000000;}
</style>
</head>
<div class="banner">
  <ul>
    <li><img src="http://icon.nipic.com/BannerPic/20200727/home/20200727103857.jpg"/></li>
    <li><img src="http://icon.nipic.com/BannerPic/20200727/home/20200727151048.jpg"/></li>
  </ul>
  <div class="banner_btn"><a class="banner_btn_left" id="banner_btn_left">《</a><a class="banner_btn_right" id="banner_btn_right">》</a></div>
  <div class="banner_page"><dl></dl></div>
</div>
<script>
//实例化
var banner=new banner('.banner',{time:5000,autoplay:true});
//切换方法
function banner(obj,arr){
	var time=arr.time || 3000;//切换时间
	var banner=document.querySelector(obj);//切换对象
	var list=banner.getElementsByTagName('ul')[0].children;
		list[0].style.display = "block";//第一个默认显示
		list[0].className = 'on';
	//创建分页
	var banner_page=banner.getElementsByTagName('dl')[0];
		for(var i=0;i<list.length;i++){
			var node=document.createElement("dt");
			if(i==0){
				node.className = 'dian';//第一个加class="dian"
			}
			banner_page.appendChild(node);
		}
	
	//鼠标经过分页
	var pagelist=banner_page.getElementsByTagName('dt');
		//console.log(pagelist);
		for(var i=0;i<pagelist.length;i++){
			pagelist[i].onmouseenter=function(){
				for(var i=0;i<pagelist.length;i++){
					pagelist[i].className = '';//移除其他的
				}
				this.className = 'dian';//给当前添加
				page();//执行分页切换
			}
		}
	//左按钮事件
	var banner_btn_left=banner.getElementsByClassName("banner_btn_left")[0];
		banner_btn_left.onclick=function(){
			arrow("left");
		}
	//右按钮事件
	var banner_btn_right=banner.getElementsByClassName("banner_btn_right")[0];
		banner_btn_right.onclick=function(){
			arrow("right");
		}
	//分页切换
	var page=function(){
		for(var i=0;i<pagelist.length;i++){
			list[i].style.display = "none";
			list[i].className = '';
			if(pagelist[i].className=="dian"){
				list[i].style.display = "block";
				list[i].className = 'on';
			}	
		}	
	}
	//按钮切换
	var arrow=function(type){
		if(type=="right"){
			for(var i=0;i<list.length;i++){
				pagelist[i].className="";
				if(list[i].className=="on"){
					list[i].style.display = "none";
					list[i].className = "";
					if(i==list.length-1){
						list[0].style.display = "block";
						list[0].className = "on";
						pagelist[0].className="dian";
					}else{
						list[i].nextElementSibling.style.display = "block";
						list[i].nextElementSibling.className = "on";
						pagelist[i+1].className="dian";
					}
					return false;
				}
			}
		}	
		if(type=="left"){
			for(var i=0;i<list.length;i++){
				pagelist[i].className="";
				if(list[i].className=="on"){
					list[i].style.display = "none";
					list[i].className = "";
					if(i==0){
						list[list.length-1].style.display = "block";
						list[list.length-1].className = "on";
						pagelist[list.length-1].className="dian";
					}else{
						list[i].previousElementSibling.style.display = "block";
						list[i].previousElementSibling.className = "on";
						pagelist[i-1].className="dian";
					}
					return false;
				}
			}
		}	
	}
	//自动切换
	function autoPlay(){
		var getplay = setInterval(function(){arrow("right")},time);
	};
	if(arr.autoplay==true){
		autoPlay();
	}
}
</script>
</body>
</html>

qq236710052

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript封装和开发插件方法，手写一个大图切换插件

前面我写过一篇jQuery封装和开发插件方法，现在我将使用同样的dom和style用原生JS写，思路并没有区别，只是原生js获取dom节点稍微繁琐一些，也可以看看我用jQuery写的那篇，点击前往。<!doctype html><html><head><meta charset="utf-8"><title>Banner</title><body><style>body{margin:0px;}
复制链接

扫一扫

专栏目录