左右水平轮播，渐变轮播
2017-08-27 本文已影响71人
DeeJay_Y
左右水平轮播
CSS部分
先写出html结构,原则上是尽量少的标签就能达到功能
<div class="carousel">
<ul class="img-ct">
<li data-id="0"><a href="#"></a></li>
<li data-id="1"><a href="#"></a></li>
<li data-id="2"><a href="#"></a></li>
<li data-id="3"><a href="#"></a></li>
</ul>
<a href="#" class="pre arrow"><</a>
<a href="#" class="next arrow"></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
设定CSS样式。想要水平轮播，那么几个li必须是水平布局，可以使用float来进行布局。
使元素进行位移一般有margin，relative以及绝对定位几种方式，要轮播显然使用绝对定位
* {
margin: 0;
padding: 0;
list-style-type: none;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
/*使元素进行位移一般有margin，relative以及绝对定位几种方式，要轮播显然使用绝对定位*/
.carousel {
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
top: 50px;
/*设置carousel显露出来的部分水平居中*/
left: 50%;
transform: translate(-50%);
}
.carousel .img-ct {
width: 1600px;
position: absolute;
}
.carousel .img-ct img {
width: 400px;
height: 250px;
}
.carousel .img-ct>li {
float: left;
}
.carousel .arrow {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid #fff;
border-radius: 50%;
top: 50%;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
font-size: 22px;
}
.carousel .arrow:hover {
background: rgba(0,0,0,0.1);
}
.carousel .pre{
left: 10px;
}
.carousel .next {
right: 10px;
}
.carousel .bullet {
position: absolute;
width: 100%;
top: 87%;
text-align: center;
}
.carousel .bullet>li {
display: inline-block;
width: 25px;
height: 5px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.carousel .bullet>li.active {
background: #ccc;
}
JS部分
轮播的思路大概是：比如说只有3张图片1,2,3那么在1到2到3的过程中，只需要设置上述例子的.img-ct的left属性，使其左右平移，就能达到水平切换的效果。但是在切换到底，即3又要轮播回1的时候，一般来说我们不进行DOM顺序的切换。而是在页面一开始初始化时，就创建头和尾两个元素的备份，头元素进行克隆，然后放到最尾部，尾元素克隆之后放到最前面。即创建头尾备份，头备份放到尾部，尾备份放到头部。这样在切换的时候，尾部要轮播到头部的话，其实是轮播到了头部的备份，这个备份是在最尾部即尾元素的下一个的，所以就不需要转换DOM顺序。然后我们在整体移到真正的元素上。
另外我们还需要知道轮播的元素的个数以及每个元素的宽度（水平轮播）。
总计一下：
- 创建头尾元素的备份，头备份放到最后面，尾备份放到最前面。
- 得到轮播元素的个数和宽度
另外关于jquery的一个特点，jq选择匹配元素只会选择当时定义的元素，如果选择元素在之后的操作中发生变化，当时已经定义的jq元素并不会随着进行动态变化。例如下面的例子使用jq获得了$imgs，然后这个$imgs就一直都是4个元素，就是当时的那4个轮播元素，后面的$('.carousel .img-ct>li')发生了变化，长度增加了，但是当时定义的$imgs不会变化。但是此时再去使用$('.carousel .img-ct>li')就会得到当前的jq对象。
轮播的js代码：
<script src="../jquery-3.2.1.min.js"></script>
<script>
var $imgct = $('.img-ct')
var $imgs = $('.carousel .img-ct>li');
var imgCount = $imgs.length; //得得到轮播元素的个数
var imgWidth = $imgs.width(); //得到轮播元素的宽度
var $preBtn = $('.pre');
var $nextBtn = $('.next');
var $bullets = $('.bullet>li');
var pageIndex = 0; // 记录轮播的状态，表示在第几页了 当前是第0页
var animating = false; //用来判断是否还在动画中，来屏蔽多次连续点击
$imgct.append($imgs.eq(0).clone()); //克隆头元素放到最后面
//在这里有一个问题，上面使用jq获得了$imgs，现在的$imgs还是4个元素，就是当时的那4个轮播元素，但是此时的$('.carousel .img-ct>li')已经是5个元素了
$imgct.prepend($imgs.last().clone()); //克隆尾元素放到最前面
//此时css中，原先是4个li并排的，现在又多了2个头尾备份，因为我们写死了img-ct的宽度，所以剩下2个li挤到了第二排，所以不应该在css中写死宽度。
$imgct.width((imgCount+2) * imgWidth); //js中设置img-ct的宽度
//此时展示的是备份的尾元素，我们想让用户看到第一张，那就让img-ct向左移动一个li元素的宽度
$imgct.css({
left: -imgWidth
});
//然后进行事件的绑定
$preBtn.on('click',function () {
playPre(1);
})
$nextBtn.on('click',function () {
playNext(1);
})
//设置bullets的跳转
$bullets.on('click',function () {
var index = $(this).index(); //拿到当前点击的那个bullet是第几个
if (index > pageIndex) {
playNext(index - pageIndex);
}
else if (index < pageIndex){
playPre(pageIndex - index);
}
})
function playNext (num) {
if (animating) {
return; // 如果还在动画中直接return掉
}
animating = true; //设置为动画中
$imgct.animate({
// left: -imgWidth, // 这时候不能写成这样，因为初始时候的left就是负的imgWidth，而且这么写图片是不会动。应该是写成left: -= imgWidth的形式
left: '-='+ num * imgWidth, // 因为jq没有left: -=imgWidth这样的写法，所以写成这样
},function () {
pageIndex += num; // 在animate的完成函数里进行pageIndex的增加和减小
if (pageIndex === imgCount) { //如果当前页码到了最后面，即头备份时，立即让pageIndex为0，然后页面回到一开始的位置
pageIndex = 0;
$imgct.css({
left: -imgWidth,
})
}
setBullet();
animating = false;
})
}
//同理playPre写为
function playPre (num) {
if (animating) {
return;
}
animating = true;
$imgct.animate({
left: '+='+ num * imgWidth, // 因为jq没有left: +=imgWidth这样的写法，所以写成这样
},function () {
pageIndex -= num;
if (pageIndex === -1) {
pageIndex = 3;
$imgct.css({
left: -4*imgWidth,
})
}
setBullet();
animating = false;
})
}
//设置下面的bullet跳转
function setBullet () {
$bullets.removeClass('active')
.eq(pageIndex).addClass('active');
}
</script>
渐变轮播
渐变轮播相对较简单，核心思想是让4个li重叠在一起，可以通过设置position:absolute;达到。然后通过变量监控当前元素的次序，通过fadeIn()和fadeOut()实现效果。
css部分只有.img-ct>li设为position:absolute；改变。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变轮播</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
/*使元素进行位移一般有margin，relative以及绝对定位几种方式，要轮播显然使用绝对定位*/
.carousel {
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
top: 50px;
/*设置carousel显露出来的部分水平居中*/
left: 50%;
transform: translate(-50%);
}
.carousel .img-ct {
/*width: 1600px;*/
position: absolute;
}
.carousel .img-ct img {
width: 400px;
height: 250px;
}
.carousel .img-ct>li {
/*通过设置绝对定位，使得所有的li都脱离文档里重合在一起*/
position: absolute;
display: none;
}
.carousel .arrow {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid #fff;
border-radius: 50%;
top: 50%;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
font-size: 22px;
}
.carousel .arrow:hover {
background: rgba(0,0,0,0.1);
}
.carousel .pre{
left: 10px;
}
.carousel .next {
right: 10px;
}
.carousel .bullet {
position: absolute;
width: 100%;
top: 87%;
text-align: center;
}
.carousel .bullet>li {
display: inline-block;
width: 25px;
height: 5px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.carousel .bullet>li.active {
background: #ccc;
}
</style>
<body>
<div class="carousel">
<ul class="img-ct clearfix">
<li data-id="0"><a href="#"></a></li>
<li data-id="1"><a href="#"></a></li>
<li data-id="2"><a href="#"></a></li>
<li data-id="3"><a href="#"></a></li>
</ul>
<a href="#" class="pre arrow"><</a>
<a href="#" class="next arrow">></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-3.2.1.min.js"></script>
<script>
var $imgct = $('.img-ct');
var $imgs = $('.carousel .img-ct>li');
var imgWidth = $imgs.width();
var imgCount = $imgs.length;
var $pre = $('.pre');
var $next = $('.next');
var $bullets = $('.bullet>li');
var currentIndex = 0; //记录当前页码
var animating = false; //针对连续重复点击，设置变量来监听是否处于动画过程中
play();
$pre.on('click',function () {
playPre();
})
$next.on('click',function () {
playNext();
})
$bullets.on('click',function () {
var index = $(this).index();
console.log('index为',index)
currentIndex = index;
console.log('pageIndex为',currentIndex)
setBullets();
$imgs.fadeOut();
$imgs.eq(index).fadeIn();
})
function playPre () {
$imgs.eq(currentIndex).fadeOut();
console.log('进入时的index',currentIndex);
if (currentIndex === 0) {
currentIndex = imgCount;
console.log('if时的index',currentIndex);
}
$imgs.eq(currentIndex-1).fadeIn();
currentIndex--;
setBullets();
console.log('退出时的index',currentIndex);
}
function playNext () {
$imgs.eq(currentIndex).fadeOut();
console.log('进入时的index',currentIndex);
if (currentIndex === imgCount-1) {
currentIndex = -1;
console.log('if时的index',currentIndex);
}
$imgs.eq(currentIndex+1).fadeIn();
currentIndex++;
setBullets();
console.log('退出时的index',currentIndex);
}
function setBullets () {
$bullets.removeClass('active')
.eq(currentIndex).addClass('active');
}
function play() {
$imgs.eq(currentIndex).fadeIn(); //页面一加载时，先让第一个元素显露出来
setInterval(function () {
playNext();
},1000)
}
</script>
</body>
</html>
JS部分先不考虑自动轮播，先进行事件绑定，然后想着先把playPre()和playNext()以及setBullets ()实现，然后设置一个setInterval即可。需要注意的是页面初始化的时候是空白的。写一句$imgs.eq(currentIndex).fadeIn(); 让第一个元素显现出来。优化的时候统一加到play()中即可。
