插件实践-轮播图

最熟悉的轮播图插件，近期时间每天一轮~

index.css

*{margin: 0;padding: 0;}

#wrap{
	width: 300px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
#wrap li{
	list-style: none;
	height: 200px;
}

#wrap .imgWrap{
	display: flex;
	flex-direction: row;
	position: absolute;
	left: 0;
	top: 0;
	transition: all .8s ease;
	
}
#wrap .numWrap{
	display: flex;
	flex-direction: row;
    position: absolute;
	left: 50%;
	bottom: 10px;
    margin-left: -40px;
}
#wrap .numWrap li{
	width: 10px;
	height: 10px;
	background: white;
	border-radius: 5px;
	margin:0 10px;
	cursor: pointer;
}
#wrap .numWrap .one{   /*准备的样式*/
	background: hotpink;
}

#wrap .left,.right{
	cursor: pointer;
	width: 15px;
	height: 20px;
	background: red;
	position: absolute;
	display: none;
	top: 40%;
}
#wrap .left{
	left: 10px;
}
#wrap .right{
	right: 10px;
}

#wrap:hover .left{
	display: block;
}
#wrap:hover .right{
	display: block;
}

*{margin: 0;padding: 0;}

#wrap{

width: 300px;

height: 200px;

position: relative;

overflow: hidden;

}

#wrap li{

list-style: none;

height: 200px;

}

#wrap .imgWrap{

display: flex;

flex-direction: row;

position: absolute;

left: 0;

top: 0;

transition: all .8s ease;

}

#wrap .numWrap{

display: flex;

flex-direction: row;

position: absolute;

left: 50%;

bottom: 10px;

margin-left: -40px;

}

#wrap .numWrap li{

width: 10px;

height: 10px;

background: white;

border-radius: 5px;

margin:0 10px;

cursor: pointer;

}

#wrap .numWrap .one{ /*准备的样式*/

background: hotpink;

}

#wrap .left,.right{

cursor: pointer;

width: 15px;

height: 20px;

background: red;

position: absolute;

display: none;

top: 40%;

}

#wrap .left{

left: 10px;

}

#wrap .right{

right: 10px;

}

#wrap:hover .left{

display: block;

}

#wrap:hover .right{

display: block;

}

index.css

<link rel="stylesheet" type="text/css" href="index.css"/>
<div id="wrap">
	<!--图片容器url-->
	<ul class="imgWrap">
		<li class="first"><img src="img/1.jpg" /></li>
		<li><img src="img/2.jpg" /></li>
		<li><img src="img/3.jpg" /></li>
	</ul>
	<!--按钮容器-->
	<ol class="numWrap">
		<li class="one"></li>
		<li></li>
		<li></li>
	</ol>
	<!--左右按钮-->
	<div class="left"></div>
	<div class="right"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jQuery.banner.js"></script>
<script>
	$("#wrap").tab({
		wrap:"#wrap",
		imgWrap:".imgWrap",
		imgWrapLi:".imgWrap>li",
		numWrapLi:".numWrap>li",
		numWrap:".numWrap",
		left:".left",
		right:".right"
	});
</script>

</ul>

</ol>

</div>

$("#wrap").tab({

wrap:"#wrap",

imgWrap:".imgWrap",

imgWrapLi:".imgWrap>li",

numWrapLi:".numWrap>li",

numWrap:".numWrap",

left:".left",

right:".right"

});

</script>

jQuery.banner.js

//函数整理如下
;
(function($) {
	//封装成函数
	$.fn.tab=function(config){
		var index = 0;
		
		var def={
			wrap:"#wrap",
			imgWrap:".imgWrap",
			imgWrapLi:".imgWrap>li",
			numWrapLi:".numWrap>li",
			numWrap:".numWrap",
			left:".left",
			right:".right"
		}
		
		var setting = $.extend({}, def, config);
		//按钮点击
		$(setting.numWrapLi).on("click", function() {
			index = $(this).index();
			next();
	
		})
	
		$(setting.left).on("click", function() {
			index--;
			next();
		})
	
		$(setting.right).on("click", function() {
			index++;
			next();
		})
	
		//动画封装,可以直接调用
		function next() {
			if(index == $(setting.imgWrapLi).length) {
				index = 0
			}else if(index==-1){
				index = $(setting.numWrapLi).length - 1;
			}
			//循环清空
			$(setting.numWrapLi).removeClass("one");
			//只给点击按钮添加class
			$(setting.numWrapLi).eq(index).addClass("one");
			 //点击按钮，显示对应图片
			$(setting.imgWrap).css("left", -($(setting.imgWrapLi).width() * index));
			//$(setting.imgWrap).css(setting.left, -($(setting.imgWrapLi).width() * index));
		}
	
		//开启动画
		var timer = setInterval(function() { //换成setTimeout只执行一次
			index++;
			next();
	
		}, 2000)
		//当鼠标移入，移除时,停止动画
		$(setting.wrap).hover(function() {
			clearInterval(timer)
		}, function() {
			//不要写var，否则会开启两次定时器
			timer = setInterval(function() {
				index++;
				next();
			}, 2000)
		})
	}
	
})(jQuery)

//;
//(function() {
//	var index = 0;
//
//	$(".numWrap").find("li").on("click", function() {
//		$(".numWrap li").removeClass("one")
//		$(this).addClass("one");
//		index = $(this).index();
//		//点击按钮，显示对应图片
//		$(".imgWrap").css("left", -($(".imgWrap li").width() * index));
//
//	})
//
//	$(".left").on("click", function() {
//		console.log(index); //2
//		index--;
//		if(index == -1) { //当第一个再往左点的时候，跳转最后一个。
//			index = $(".numWrap li").length - 1;
//		}
//		$(".numWrap li").removeClass("one");
//		$(".numWrap li").eq(index).addClass("one");
//		$(".imgWrap").css("left", -($(".imgWrap li").width() * index));
//	})
//
//	$(".right").on("click", function() {
//		index++;
//		if(index == 3) { //当第三个再往左点的时候，跳转第个。
//			index = 0;
//		}
//		$(".numWrap li").removeClass("one")
//		$(".numWrap li").eq(index).addClass("one")
//		$(".imgWrap").css("left", -($(".imgWrap li").width() * index));
//	})
//
//	//	动画封装
//	function next() {
//		if(index == $(".imgWrap li").length) {
//			index = 0
//		}
//		console.log(index);
//		$(".numWrap li").removeClass("one");
//		$(".numWrap li").eq(index).addClass("one");
//		$(".imgWrap").css("left", -($(".imgWrap li").width() * index));
//	}
//
//	//	开启动画
//	var timer = setInterval(function() { //换成setTimeout只执行一次
//		index++;
//		next();
//
//	}, 2000)
//	//	当鼠标移入时,停止动画
//	$("#wrap").hover(function() {
//		clearInterval(timer)
//	}, function() {
//		timer = setInterval(function() {
//			index++;
//			next();
//		}, 2000)
//	})
//})()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

//函数整理如下

;

(function($) {

//封装成函数

$.fn.tab=function(config){

var index = 0;

var def={

wrap:"#wrap",

imgWrap:".imgWrap",

imgWrapLi:".imgWrap>li",

numWrapLi:".numWrap>li",

numWrap:".numWrap",

left:".left",

right:".right"

}

var setting = $.extend({}, def, config);

//按钮点击

$(setting.numWrapLi).on("click", function() {

index = $(this).index();

next();

})

$(setting.left).on("click", function() {

index--;

next();

})

$(setting.right).on("click", function() {

index++;

next();

})

//动画封装,可以直接调用

function next() {

if(index == $(setting.imgWrapLi).length) {

index = 0

}else if(index==-1){

index = $(setting.numWrapLi).length - 1;

}

//循环清空

$(setting.numWrapLi).removeClass("one");

//只给点击按钮添加class

$(setting.numWrapLi).eq(index).addClass("one");

//点击按钮，显示对应图片

$(setting.imgWrap).css("left", -($(setting.imgWrapLi).width() * index));

//$(setting.imgWrap).css(setting.left, -($(setting.imgWrapLi).width() * index));

}

//开启动画

var timer = setInterval(function() { //换成setTimeout只执行一次

index++;

next();

}, 2000)

//当鼠标移入，移除时,停止动画

$(setting.wrap).hover(function() {

clearInterval(timer)

}, function() {

//不要写var，否则会开启两次定时器

timer = setInterval(function() {

index++;

next();

}, 2000)

})

}

})(jQuery)

//;

//(function() {

// var index = 0;

// $(".numWrap").find("li").on("click", function() {

// $(".numWrap li").removeClass("one")

// $(this).addClass("one");

// index = $(this).index();

// //点击按钮，显示对应图片

// $(".imgWrap").css("left", -($(".imgWrap li").width() * index));

// })

// $(".left").on("click", function() {

// console.log(index); //2

// index--;

// if(index == -1) { //当第一个再往左点的时候，跳转最后一个。

// index = $(".numWrap li").length - 1;

// }

// $(".numWrap li").removeClass("one");

// $(".numWrap li").eq(index).addClass("one");

// $(".imgWrap").css("left", -($(".imgWrap li").width() * index));

// })

// $(".right").on("click", function() {

// index++;

// if(index == 3) { //当第三个再往左点的时候，跳转第个。

// index = 0;

// }

// $(".numWrap li").removeClass("one")

// $(".numWrap li").eq(index).addClass("one")

// $(".imgWrap").css("left", -($(".imgWrap li").width() * index));

// })

// // 动画封装

// function next() {

// if(index == $(".imgWrap li").length) {

// index = 0

// }

// console.log(index);

// $(".numWrap li").removeClass("one");

// $(".numWrap li").eq(index).addClass("one");

// $(".imgWrap").css("left", -($(".imgWrap li").width() * index));

// }

// // 开启动画

// var timer = setInterval(function() { //换成setTimeout只执行一次

// index++;

// next();

// }, 2000)

// // 当鼠标移入时,停止动画

// $("#wrap").hover(function() {

// clearInterval(timer)

// }, function() {

// timer = setInterval(function() {

// index++;

// next();

// }, 2000)

// })

//})()

浅夏丿初晴

浅夏丿初晴

JQ插件编写习惯汇总

小程序缓存

tu