自制js轮播图插件教程

最新推荐文章于 2024-01-15 18:56:46 发布

魔力Tow

最新推荐文章于 2024-01-15 18:56:46 发布

阅读量2.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44210563/article/details/103668471

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文将指导你如何自制一个简单的JavaScript轮播图插件。通过在HTML中添加一个div并指定大小，插件会自动在其中生成轮播图，无需额外复杂代码。首先介绍插件的基本概念和使用方法，接着详细解释创建轮播图的步骤，包括函数的命名、参数传递、DOM操作等。最后，虽然只展示了部分关键代码，但鼓励读者自行完成剩余部分并修正可能的错误。

摘要由CSDN通过智能技术生成

自制js轮播图插件

自制js轮播图插件

自制js轮播图插件

。。。先假设你没我厉害，我要开始装x了。
先看效果图点我查看
插件第一步，说到这里，先说一下什么是插件，这个插件是干什么的（好像废话）；
就是你在html中只要写一个div，指定其大小后，插件就会自动在其中生成一个轮播图，不用写什么其他的。（说到这个现在c3写轮播图也挺快的。）；咳咳，扯远了，第一步插入一个div，然后，假设你已经写完了这个插件，要怎么用呢？
当然先引用，然后里面肯定的要一个函数，让自己传参，
传什么参？，一个dom元素也就是你要放东西的那个div，（顺便给它加点css）
和一堆图片了，这个用数组搞定，然后，调用插件的那个函数，到此html写完了。
详解如下：

<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>demo</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		#banner{
			width: 500px;
		   height: 300px;
		   outline: 4px solid black;
		   margin: 100px auto;
		}
		body{
			background-color: #cc6;
		}		
	</style>
</head>
<body>
	<div id="banner">	</div>
	<script src="./autoPlayPicture.js"></script>
	<script type="text/javascript">
		var bannerDiv =document.getElementById('banner');
		createBannerArea(bannerDiv,[
			{imgUrl:'./img/1.jpg',link:'#'},
			{imgUrl:'./img/2.jpg',link:'#'},
			{imgUrl:'./img/3.jpg',link:'#'},
			{imgUrl:'./img/4.jpg',link:'#'}]);
	</script>	
</body>
</html>

然后表演的时候到了，另外一般其轮播图函数名字都什么怎么起的？
百度了一下无果，只好自己想了一个autoPlayPicture。(⊙﹏⊙)；
运行一下，肯定报错，因为autoPlayPicture（）还没创建；
所以js第一步创建它，然后里面写的东西，创建一个两个div，一个放图片，
一个放图标，就那个点，当然你也可以弄成数字。

function createBannerArea(arrArea,options){
  let imgArea = document.createElement('div');
  let numberArea = document.createElement('div');}

函数里面两个参数就是你html里的，利用他们干点事
创建另一个函数，initImgs（），来创造图片的区域；

function createBannerArea(arrArea,options){
  let imgArea = document.createElement('div');
  let numberArea = document.createElement('div');
function initImgs(){
  	    imgArea.style.width ='100%';
  	    imgArea.style.height ='100%';
  	    imgArea.style.display ='flex';
  	    imgArea.style.overflow ='hidden';
    for (let i = 0; i < options.length; i++) {
    	const obj = options[i];
        const img = document.createElement('img');
        img.src = obj.imgUrl;
        img.style.width ='100%';
        img.style.height ='100%';
        img.style.margin ='0';
        img.style.cursor = 'pointer'
        img.addEventListener('click',function(){
          location.href = options[i].link;
        })
        imgArea.appendChild(img);
        arrArea.appendChild(imgArea);       
    }
  }}

额，我不行了，扔代码了。不多也就106行

// 轮播图，第一参dom元素，第二参图片。
function createBannerArea(arrArea,options){
  let imgArea = document.createElement('div');
  let numberArea = document.createElement('div');
  let cursorIndex = 0;
  let changeTimer = null;//轮播图计时器
  let changeTime = 3000;//轮播图时间
  let animationTimer =null;
  initImgs();
  initNumbers();
  setStatus();
  autoChange(); 
  //以下为函数;
function initImgs(){
  	    imgArea.style.width ='100%';
  	    imgArea.style.height ='100%';
  	    imgArea.style.display ='flex';
  	    imgArea.style.overflow ='hidden';
    for (let i = 0; i < options.length; i++) {
    	const obj = options[i];
        const img = document.createElement('img');
        img.src = obj.imgUrl;
        img.style.width ='100%';
        img.style.height ='100%';
        img.style.margin ='0';
        img.style.cursor = 'pointer'
        img.addEventListener('click',function(){
          location.href = options[i].link;
        })
        imgArea.appendChild(img);
        arrArea.appendChild(imgArea);       
    }
  }
function initNumbers(){
  	          numberArea.style.textAlign ='center';
  	          numberArea.style.margin = '-1.3rem';
        for (let i = 0; i < options.length; i++) {
        	  let num = document.createElement('span');
        	  num.style.display = 'inline-block';
        	  num.style.margin ='0 0.7rem'
        	  num.style.width ='1rem';
        	  num.style.height ='1rem';
        	  num.style.background ='white';
        	  num.style.borderRadius ='50%';
        	  num.style.cursor = 'pointer'
        	  num.addEventListener('click',function(){
        	  	cursorIndex = i;
        	  	setStatus();
        	  })
        	 numberArea.appendChild(num);
        	 arrArea.appendChild(numberArea);
        }
  }
function setStatus(){
     for (let i = 0; i < options.length; i++) {
     	 if (i == cursorIndex) {
           numberArea.children[i].style.background ='black'; 
     	 }else{
     	 	numberArea.children[i].style.background  ='white';
     	 }
 }
 //动画效果
 let end = cursorIndex * -100;
 let start = parseInt(imgArea.children[0].style.marginLeft);
 let animationTime = 300;//轮播图动画时间
 let range = end-start;
 let speed =range/animationTime;
    if (animationTimer) {
    	createElement(animationTimer)
    } 
    animationTimer = setInterval(function(){
                  start += speed*20;
                  imgArea.children[0].style.marginLeft = start+ '%';
                  if (Math.abs(end-start)< 1) {
                  	imgArea.children[0].style.marginLeft = end+ '%';
                  	clearInterval(animationTimer);
                  	animationTimer = null;
                  }
 },20)
 
}
//自动轮播
function autoChange(){
	if (changeTimer) {
	  return;
	}
   changeTimer = setInterval(function(){
   	if (cursorIndex === options.length -1) {
   		
   		 cursorIndex = 0;
   	}else{
   		 cursorIndex ++;
   	}
   	 setStatus();
    },changeTime)
}
//鼠标悬停效果
arrArea.addEventListener('mouseenter',function(){
        	clearInterval(changeTimer);
        	changeTimer = null;       		
            arrArea.addEventListener('mouseleave',autoChange)
        	
        	
        })
}