每天学一个jquery插件-经典轮播图
每天一个jquery插件
——经典轮播图
作为一个萌新前端，现在就处于一个知其然而不知其所以然的状态，所以说打算每天敦促自己找一个jquery插件进行模仿学习实现，今天打想模仿实现的是经典的轮播图。
- 找个模仿的插件
- 实现没有封包情况下的样式和功能
- 将实现了功能的内容打包
模仿的轮播图
我做的轮播图
首先写一个容器，给上高宽等属性外加一个id
代码都是展示思路，有问题还请原谅哈哈
<div id="divs2">div>
然后给上它基本样式
#divs2 {
height: 300px;
width: 600px;
border: 1px solid lightgray;
}
这样子我就有了一个四四方方的容器了，接下来就是实现图片的嵌入了，通过研究上面大佬的写法，很容易就知道他的想法是把图片挨个放进去然后每个图片直接宽高等于目标容器的宽高就行了，所以就要求有以下的样式基础，这些到时候都是得挪进插件的
#divs2{
overflow:hidden;
display:flex;
position:relative;
}
#divs2 img{
width:100%;
height:100%；
}
然后我们直接在原内容上补充上我们想法之中的内容，包括轮播的图片，小圆点，左右侧的点击箭头
<div id="divs2">
<img src='0.html' data-href='#0'>
<img src='1.html' data-href='#1'>
<img src='2.html' data-href='#2'>
<img src='3.html' data-href='#3'>
<div class='rightcheck'>〉div>
<div class='leftcheck'>〈div>
<div class='points'>
<div class='point active' data-page='0'>div>
<div class='point' data-page='1'>div>
<div class='point' data-page='2'>div>
<div class='point' data-page='3'>div>
div>
div>
然后补充必要的样式
/* 小圆点的容器，把里面的小圆点居中放好，然后自己定位到当前容器的底部，宽度适应容器的宽度 */
#divs2 .points{
color:white;
position:absolute;
width:100%;
bottom:0;
height:30px;
display:flex;
justify-content:center;
align-items:center;
}
/* 小圆点，首先它是圆的，其次给上一些必要的宽高加外边距 */
#divs2 .point{
background-color:black;
width:10px;
height:10px;
border-radius:50%;
margin:5px;
cursor:pointe;
}
/* 选中的小圆点应该有的样子 */
.active{
background-color:white;
}
/* 左右点击箭头，这部分样式是把两个箭头都适应容器高度然后定位到容器的左边 */
#divs2 .leftcheck,#divs2 .rightcheck{
z-index:99;
color:white;
font-weight:bold;
position:absolute;
background-color:rgb(0,0,0,0.2);
height:100%;
width:20px;
display:flex;
justify-content:flex-start;
align-items:center;
cursor:pointer;
}
/* 右边的点击箭头丢右边去 */
#divs2 .rightcheck{
margin-left:380px;
justify-content:flex-end;
}
这样的操作做好之后应该的外观如下如下
接下来就是实现轮播的效果了，这部分就是在jquery之中实现了，看下面的示意图，相信大家一下就知
道实现的方法了，
如果还是不理解，可以直接看这个dom的表现情况
这样子应该就懂了，道理都懂了，然后就差实现了，上代码，代码可能会过于冗余，但是我会尽量在注释里面讲清楚我的实现思路的
$(function(){
//轮播到第几张图
var count = 0;
//秒表
var timer = null;
//时间
var time = 2000;
//图片切换
var imgchange = function(){
$("#divs2 img").first().stop().animate({
"margin-left":"-"+400*count+"px";
},500)
}
//小圆点切换
var pointchange=function(){
$(".point").removeClass('active');
$(".point[data-page='"+count+"']").addClass('active');
}
//周期切换图片与小圆点
var timerstart = function(){
clearInterval(timer);
timer = setTimeout(function(){
count++;
count = count%4;
imgchange();
pointchange();
},time)
}
//点击小圆点切换到对应的图片
$("#divs2 .point").click(function(){
count = parseInt($(this).attr("data-page"));
imgchange();
pointchange();
timerstart();
})
//点击左右箭头切换
$("#divs2 .leftcheck").click(function(){
count--;
count=count<0?0:count;
imgchange();
pointchange();
timerstart();
})
$("#divs2 .rightcheck").click(function(){
count++;
count=count%4;
imgchange();
pointchange();
timerstart();
})
//左右箭头在鼠标悬浮轮播图上的出入效果
$("#divs2").mouseenter(function(){
$("#divs2 .leftcheck").stop().animate({
"margin-left":"0px"
},500)
$("#divs2 .rightcheck").stop().animate({
"margin-left":"380px"
},500)
})
$("#divs2").mouseleave(function(){
$("#divs2 .leftcheck").stop().animate({
"margin-left":"-20px"
},500)
$("#divs2 .rightcheck").stop().animate({
"margin-left":"400px"
},500)
})
//最后启动
timerstart();
})
ps:按照一般情况来说，左右箭头应该是隐藏在左右两侧的，只有在鼠标悬浮在目标容器上的时候才应该出现，所以说，这里补充一下左右箭头的样式
.leftcheck{
margin-left:-20px;
}
.rightcheck{
margin-left:400px;
}
/*这里都是写死的，表现的效果应该是容器overflow：hidden的情况下，这两个箭头都会隐藏在左右两侧外边*/
然后这样子操作之后应该就没问题了，最后的问题就是怎么给他封包到一个插件中，首先我们抽取所有必要的参数，容器id是一个，刷新周期time是一个，然后图片的路径集合是一个，然后拓展一个功能，点击这个图片会跳转对应的网页集合也算上一个，
这样子我们的目的就是这样子调用插件之后就要实现我们的轮播图
var lbt = lbt({
id,imgs,hrefs,time});
其实要实现起来还挺简单的，但是里面代码等于上面的全部挪一遍，就不展示了，只讲一下思路：
- 首先把所有动态dom先根据图片集合渲染出来，图片有多少就给对应id容器之中遍历插入多少图片
- 然后把所有基本控件包括小圆点，左右箭头的dom也一起添加进来
- 接着是针对性的赋予样式，在所有dom都添加进去之后，然后对应的dom添加样式这些在jquery里面都是很容易的，只需要把上面写好的样式重新搬进来一遍就行了
$(dom).css({"":"","":""}) - 最后这样子之后再把对应的功能写在最底下就行了，但是必须记得选择器不能选择出一个集合出来，必须筛选到这个id下的这个控件，避免污染其他的内容。
- Ps：搬进来的样式像什么100%，vm，em这些百分比之类的肯定要适当更改一下的，比如我定位左右箭头位置的用的是直接-20px和400px,坑定不行这个得根据父容器确定的，但是这些可以直接
$("#").css("heigth,width")获取了之后再进行样式的渲染，我的意思就是很多自适应样式的地方必须要稍微修改一下的，这样子里面控件的样式才能正确的根据父容器的样式进行变化。
然后我做好的案例发在网上了，里面的内容和我这里面的代码展示更加冗余和不合理，所以说大家不介意的话可以去下载看看，qwq
插件上传的地址