思路
最近学习了用JQuery实现轮播，也开始自己尝试写一些文章巩固知识，下面是一些轮播的知识。
什么是轮播
用图片来说明一下（图片是转载的）
轮播效果图.png
-
那么，他的原理是怎样的呢？
- 可以操作DOM的顺序来实现轮播效果（这个并不推荐，因为很吃性能）
- 也是本文所说的，利用clone来实现轮播
- 以下是原理图
Paste_Image.png
原理是，clone两个边界，一个是开头（clone0），位于轮播框架最前的位置，一个是结尾（clone3）,位于轮播框架的最后的位置，只要在轮播的时候轮播到这两个边界，利用CSS直接改变整个轮播框架的位置来跳回到第一幅图（0）或者最后一幅图（3）。
-
接下来，让我们看一下他的结构来继续了解原理吧！
-
HTML的结构
-
我们知道，轮播是有几张图片组成，那么我们可以使用<ul> <li>来编写。
<!--储存图片和存储框架-->
<div class="carousel>
<ul class="img-ct">
<li style="background:yellow"></li>
<li style="background:red"></li>
<li style="background:blue"></li>
<li style="background:black"></li>
</ul>
<!--左右按钮，按右是下一张图片，按左是上一张图片 -->
<a href="#" class="btn left"> < </a>
<a href="#" class="btn right"> > </a>
<!--下栏按钮，选取哪个到哪个图片 -->
<ul class="bottom-btn">
<li class="active"><li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
-
CSS结构
- 我们要让轮播图设置成绝对定位，这样就可以使用JS让他移动
- 要让图片打横排列，必须设置浮动，问题来了，浮动之后，图片是如下面这样呈现的
-
Paste_Image.png
因此，我们需要隐藏元素，只让他呈现一张图。我们可以使用overflow:hidden来实现这个功能，他可以让多余的元素隐藏。
/* 基础样式去除 */
html,body,ul,li{
margin:0;
padding:0;
a{
text-decoration:none
}
li{
list-style:none
}
/*整个轮播框和每个轮播图的样式 */
.carousel{
width:500px;
height:300px;
overflow:hidden;
position:relative;
.img-ct{
position:absolute
}
.img-ct:after{
content:"";
display:block;
clear:both
}
.img-ct li{
float:left
width:500px;
height:300px;
}
/* 左右按钮样式 */
.btn{
position:absolute;
top:50%;
margin-top:10px;
width:30px;
height:30px;
line-height:30px;
text-align:center;
border-radius:30px;
background:#eee;
color:#fff;
opacity:0.7;
.btn:hover{
opacity:1;
}
.left{
left:10px;
}
.right{
right:10px;
}
/* 下栏的按钮 */
.botton-btn{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
.botton-btn:after{
content:''
display:block;
clear:both
}
.botton-btn li{
margin-left:9px;
width:30px;
height:15px;
float:left;
border-radius:5px;
background:#fff;
cursor:pointer
.botton-btn li.active{
background:#4E443C
- Javascript
CSS和HTML写完了，我们可以开始clone两个边界，然后通过改变整个轮播框的位置来让他实现轮播
//各种变量声明
var $ct = $('.img-ct"),
$left = $('.left"),
$right = $('.right'),
$bottomBtn = $('.bottom-btn'),
$items = $('.img-ct').children();
var imgWidth = $ct.children.width(), //获取每张图片的宽度，用于到时候计算移动
imgCount = $items.length; //获取轮播框里有多少张图片
//使用clone()创造边界
$ct.prepend($item.last().clone()); //克隆最后的元素在最前面
$ct.append($item.first().clone());
newImgCount = $ct.children.length //更新轮播框里有多少张图片
$ct.css({
left:0-imgWidth, //因为创造了边界，因此需要向左退一格
width:imgWidth*newImgCount // 更新模态框的新宽度，让他们在同一排呈现，不然会出现白屏什么的问题
})
//点击左右换图片
var curIdx = 0 ;//当前的图片，0是第一张；
var lock = false; //状态锁
//向右
function playNext(idx){
var idx = idx || 1 //如果没有特别说明是第几个就只动1个
if(!lock){
lock = true;
$ct.animate({left="-=" +(imgWidth*idx)},function(){ // “-=”等于向右偏移，偏移到下一张图片的位置，也就是需要偏移的那张图片的宽度,并且写个回调函数进行判断
curIdx = (curIdx +Idx) %imgCount //利用求余的方式，当curIdx ===0 也就是到边界，直接改变css
if(curIdx === 0){
$ct.css({left:0-imgWidth}) //第一张图的位置
curIdx = 0;//归0，从第一张开始
}
lock =false
setItem();
})
}
}
//向左
function playPre(idx){
var idx = idx || 1;
if(!lock){
lock = true;
$ct.animate({left:"+="+(imgWidth * idx),function(){ //"+="向左偏移
curIdx = (imgCount + curIdx - idx) % imgCount ;
if (curIdx === (imgCount -1){
$ct.css({left:0-imgWidth*imgCount})
}
lock = false;
setItem();
})
}
}
//下栏按钮变色
function setItem(){ $nav.find('li').removeClass('active').eq(curIdx).addClass('active')}
//下栏按钮选取轮播第几张图片
$nav.find('li').on('click',function(){ //按第几个就去第几个
var idx = $(this).index();
if(idx > curIdx){
playNext(idx-curIdx);
}
else if(idx < curIdx) {
playPre(curIdx-idx);
}
//事件绑定
$right.on('click',function(){
playNext();
})
$left.on('click',function(){
playPre();
})
这样，我们就能把轮播完成了，主要掌握移动轮播框和clone首尾元素作边界的思路就能实现
网友评论