一键生成轮播图，轮播图插件

---

一键生成轮播图，轮播图插件

---

简介

写练习的时候发现每次写轮播图都觉得很麻烦，突发奇想，何不写个轮播图插件，需要轮播图的时候，直接调用插件一键生成就行了！！！
于是乎，便写了以下代码(因为博主还是在校学生，代码构思什么的和那些老大们没法比，所以求不喷)；

基于jQuery的轮播图插件

因为这个插件是基于jQuery来完成的，所以用这个插件前请先引入jQuery~~
这个插件的使用方法

1. 因为这个插件方法名为sliderImg，使用直接选中一个div，然后.sliderImg进行调用即可
2. 参数 ： 传一个对象作为参数
3. 对象里面必填的一个属性名 ： img --> 它的值是一个数组，数组的每一位值是轮播图图片的src地址
4. 下面的属性是可选参数，可填可不填
5. url(选填) --> 是点击每一张轮播图后跳转的地址(即a标签的href地址), 默认为#；
6. style(选填) --> 选择轮播图的运动方式(目前只写了一种运动方式，后期博主可能还会基于这个插件再增加多种运动方式)
7. speed(选填) --> 每一张轮播图运动的速度，默认为400毫秒
8. staty(选填) --> 每张轮播图停留的时间，默认为2秒

下面是插件的代码

$.fn.extend({
	//传一个对象，对象里面的img是一个数组，用于接收图片的地址，
	//url用于接收a标签的链接地址，
	//style是轮播图的运动方式，默认是滑动轮播
	//speed是用于规定每隔多少秒轮播完一张图片， 默认是1秒
	sliderImg : function (slider) {
		var imgSrc = [],	//图片的src地址
			urlSrc = [],	//图片a标签的链接地址
			self = this,
			speed = slider.speed || 400,	//可以规定轮播图的运动时间，默认为600毫秒
			stay = slider.stay || 2000,		//每张图片停留的展示时间，默认为2秒
			timer = null,
			index = 0,
			lock = true,
			faWidth = self.width(),		//调用轮播图插件的div的宽
			faHeight = self.height();	//调用轮播图插件的div的高
			saveData(slider);	//把图片和url信息保存到数组里面
		var	len = imgSrc.length;		//图片的总数

	//入口函数
	function init() {
		//saveData(slider);
		createDom();
		renderStyle();
		move();
		bindEvent();
	}

	//保存图片和a标签的地址
	function saveData(data) {
		for(var prop in data) {
			if(prop == 'img' || prop == 'url') {
				//把图片和a标签的地址保存出来
				var len = data[prop].length;
				for(var i = 0; i < len; i++) {
					if(prop == 'img') {
						imgSrc.push(data[prop][i]);
					}else if(prop == 'url') {
						urlSrc.push(data[prop][i]);
					}
				}
			}
		}
	}

	//创建轮播图需要的标签
	function createDom() {
		var ul = $('<ul class="slider-img"></ul>'),
			span = $('<span class="sli-le-btn">&lt;</span>\
					<span class="sli-ri-btn">&gt;</span>'),
			indexUl = $('<ul class="index-list"></ul>'),
			indexLi = '',
			str = '';
		for(var i = 0; i < len; i++) {
			str += '<li>\
						<a href="' + (urlSrc[i] || '#') +' ">\
							<img src="' + imgSrc[i] + '">\
						</a>\
					</li>';
			indexLi += '<li index="'+ i +'"></li>';
		}
		str += '<li>\
					<a href="' + urlSrc[0] +' ">\
						<img src="' + imgSrc[0] + '">\
					</a>\
				</li>';
		ul.html(str);
		indexUl.html(indexLi);
		self.append(ul, span, indexUl);
		//self.append(ul).append(span);
	}

	//给ul和li，img等赋予样式
	function renderStyle() {
		/*var faWidth = self.width(),
			faHeight = self.height(),
			len = imgSrc.length;*/
		self.css({
			//给wrapper赋予样式
			position : 'relative',
			overflow : 'hidden'
		}).find('.slider-img').css({
			//给ul赋予样式
			position : 'absolute',	//绝对定位，因为是ul带着所有的li运动的
			width : faWidth * (len + 1),	//宽为li即父级的宽度*li的个数
			height : faHeight,		//高和父级的一样
			overflow : 'hidden',	//溢出隐藏
		}).find('a').css({
			display : 'inline-block',
			width : faWidth,		
			height : faHeight
		}).end().find('li').css({
			//给li赋予样式
			width : faWidth,		//宽和wrapper的一样
			height : faHeight,		//高也和wrapper的一样
			float : 'left'
		}).find('img').css({
			width : faWidth,		//图片的宽高为100%
			height : faHeight		//图片的宽高为100%
		});
		self.find('span').css({
			position : 'absolute',
			width : '25px',
			height : '50px',
			backgroundColor : '#000',
			color : '#fff',
			opacity : '0.2',
			fontSize : '20px',
			lineHeight : '50px',
			textAlign : 'center',
			cursor : 'pointer',
			top : faHeight / 2 - 25
		}).filter('.sli-ri-btn').css({
			right : '0px'
		}).filter('.sli-le-btn').css({
			left : '0px'
		});
		self.find('.index-list').css({
			position : 'absolute',
			bottom : '15px',
			left : '50%',
			opacity : 0.7,
			cursor : 'pointer',
			transform : 'translateX(-50%)'
		}).find('li').css({
			listStyle : 'none',
			float : 'left',
			width : '10px',
			height : '10px',
			backgroundColor : '#000',
			marginRight : '5px',
			borderRadius : '50%'
		}).eq(0).css({
			backgroundColor : '#fe0101'
		});		
	}

	//图片轮播运动
	function move(direction) {
		clearTimeout(timer);
			var ul = self.find('.slider-img');	
			//一共有多少张图片，运动的图片为总图片+1
			//图片每轮播一张，都运动 faWidth的宽度
			//如果图片运动到 len * faWidth的时候，left = 0
		if(lock) {
			if(!direction || direction == 'right->left') {
				//默认轮播或者按了右边按钮的轮播方式
				lock = false;						
				ul.animate({
					left : Math.ceil(ul.position().left) - faWidth
				}, speed, 'swing', function () {
					lock = true;
					index++;								
					if(Math.ceil(ul.position().left) == (-len * faWidth)) {
						ul.css('left', '0px');
						index = 0;
					}
					handleList(index);
					
					timer = setTimeout(function () {								
						move();
					}, stay);
				});
			}else if(direction == 'left->right') {
				lock = false;
	
				if(Math.ceil(ul.position().left) == 0) {
					ul.css('left', -len * faWidth);
					index = len;
				}
				ul.animate({
					left : Math.ceil(ul.position().left) + faWidth
				}, speed, 'swing', function () {
					lock = true;
					index--;
					
					handleList(index);
					timer = setTimeout(function () {
						move('right->left');
					}, stay)
				});
			}
		}
	}

	//绑定事件
	function bindEvent() {
		//鼠标移入显示按钮
		/*self.hover(function () {
			$(this).find('span').css('display', 'block');
		}, function () {
			$(this).find('span').css('display', 'none');
		});*/
		//鼠标移到按钮处，改变按钮的不透明度
		self.find('span').hover(function () {
			$(this).css('opacity', '0.8');
		}, function () {
			$(this).css('opacity', '0.2');
		});

		//按左边的按钮
		self.find('.sli-le-btn').on('click', function () {
			move('left->right');
		});
		//按右边的按钮
		self.find('.sli-ri-btn').on('click', function () {
			move('right->left');
		});
		self.find('.index-list').on('click', function (e) {
			var data =  parseInt($(e.target).attr('index'));
			index = data;
			clearTimeout(timer);
			self.find('.slider-img').animate({
				left : -faWidth * data
			}, speed, 'swing', function () {
				handleList(data);
				timer = setTimeout(function () {
					move();
				}, stay)
			}, stay);
		});
	}

	//处理下面的几个小圆点
	function handleList(data) {
		for(var i = 0; i < len; i++) {
			self.find('.index-list')
				.find('li').css({
					backgroundColor : '#000'
				});
		}
		self.find('.index-list')
			.find('li').eq(data).css({
				backgroundColor : '#fe0101'
			});
	}
	init();
	//console.log(len, 'aaa')
}
});

写完插件的代码，以下是我引用插件生成轮播图的例子

	$('.wrapper').sliderImg({
		img : ['./1.jpg', './2.jpg', './3.jpg', './4.jpg', ],	//只有此img属性是必填的，下面的所有属性可以忽略不写
		url : ['https://www.baidu.com/', '#', '#', '#','#', '#', '#', 'https://www.jd.com/'],
		style : 'slider',
		speed : 400,
		stay : 2000
	});

感谢大家的观看~~