题目1：轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
轮播原理.jpg
布局：
设置一个整体轮播容器，给容器设置一个图片的宽高，设置相对定位，并且设置overflow：hide 隐藏溢出部分。轮播容器内创建图片容器和焦点切换容器，设置图片容器，高度为图片高度，宽度为所有包含的图片宽度（可以不设置宽度，但需要使用jQ添加计算后的所有图片宽度），把所有图片排成一列，便于实现轮播。设置一个焦点选项区域，相对于轮播容器定位在底部。
逻辑：
通过移动内容块的位置，使内容块内部的元素达到切换效果，具体实现为：在尾部clone第一个元素，在头部clone最后一个元素并相应增加图片容器的宽度；当运动到clone首图片时，立即移动到真实首图片，当运动到clone尾图片时，就立即将其移动到真实尾图片，这样我们的肉眼看上去就是连贯循环的。当快速切换到不同页面时就需要知道当前正在展现的是哪一页，可以设置一个标记位，初始值为0，每次切换时这个标记位的值都要跟着改变。
函数接口：
-
autoPlay() 自动轮播
-
playNext() 切换到下一页
-
playPre() 切换到上一页
-
setBullet() 设置焦点切换效果
题目2：实现视频中的左右滚动无限循环轮播效果
css部分
.carousel{
position: relative;
width: 320px;
height: 180px;
overflow: hidden;
}
.carousel ul,
.carousel li{
margin: 0;
padding: 0;
list-style: none;
}
.carousel .img-ct{
position: absolute;
overflow: hidden;
}
.carousel .img-ct>li{
float: left;
}
.carousel .img-ct img{
width: 320px;
height: 180px;
}
.carousel .arrow{
position: absolute;
top: 50%;
margin-top: -15px;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #fff;
line-height: 30px;
color: #fff;
text-align: center;
text-decoration: none;
}
.carousel .arrow:hover{
opacity: 0.8;
}
.carousel .pre{
left: 10px;
}
.carousel .next{
right: 10px;
}
.carousel .bullets{
position: absolute;
bottom: 10px;
font-size: 0;
width: 100%;
z-index: 1;
text-align: center;
}
.carousel .bullets > li{
display: inline-block;
width: 30px;
height: 5px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
margin: 0 3px;
}
.carousel .bullets > li.active{
background-color: #ccc;
}
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="bullets">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
jQuery部分
var $imgCt = $('.carousel .img-ct')
//获取图片容器
var $imgs = $('.carousel .img-ct>li')
//获取所有图片
var $preBtn = $('.carousel .pre')
//获取上一页按钮
var $nextBtn = $('.carousel .next')
//获取下一页按钮
var $bullets = $('.carousel .bullets li')
//获取所有焦点
var pageIndex = 0;
//当前图片下标
var isAnimate = false
//防止用户的重复点击，加锁
var imgCount = $imgs.length
//获取所有图片长度
var imgWidth = $imgs.width()
//获取单个图片宽度
$imgCt.append($imgs.first().clone())
//克隆第一个图片，添加到图片容器最后
$imgCt.prepend($imgs.last().clone())
//克隆最后一个图片，添加到图片容器最前
$imgCt.width(( imgCount + 2 ) * imgWidth )
//把图片容器的宽度，设置为([原始图片个数+后来新增的2个] x 一个图片宽度)
$imgCt.css({left:-imgWidth})
//图片容器向左移动负一个图片宽度(整体左移一个图片位置)
$nextBtn.click(function(){
playNext(1) //点击下一张按钮，执行函数 展示 下一页
})
$preBtn.click(function(){
playPre(1) //点击上一张按钮，执行函数 展示 上一页
})
/*点击焦点定位部分*/
$bullets.click(function(){
var index = $(this).index() //获取点击焦点下标
if( index > pageIndex ){ //如果点击的下标大于当前图片的下标
playNext( index - pageIndex ) //调用下一页函数(滚动格数为: [点击下标 - 当前图片的下标位置])
}else if(index < pageIndex){ //如果点击的下标 小于 当前图片的下标位置
playPre( pageIndex - index ) //调用向前滚动函数(滚动格数为: [当前图片的下标位置 - 点击下标])
}
})
function playNext(len){
if(isAnimate) return; //正在动画中，return掉
isAnimate = true ; //表示现在要动画了 加锁
$imgCt.animate({
left: '-=' + len * imgWidth //在原来基础上，再减少 len 个图片宽度的值
},function(){ //当执行完之后
pageIndex += len; //一次加上滚动的页码
if( pageIndex === imgCount ){ //当点击到[原始图片个数](4)
pageIndex = 0;
$imgCt.css({left:-imgWidth}) //回到初始位置
} //这里用.css 没有动画效果，立刻切换到
setBullet() //调用焦点切换函数
isAnimate = false; //动画完成之后 解锁
})
}
function playPre(len){
$imgCt.animate({
left:'+='+len*imgWidth //在原来基础上，再加上 len 个图片宽度的值
},function(){
pageIndex -= len //一次减去滚动的页码
if(pageIndex < 0){ //当滚动到最前一张
pageIndex = imgCount - 1 //总数-1(3) 切换到最后一张
$imgCt.css({left:-imgCount*imgWidth})
} //让图片切换过去
setBullet() //调用焦点切换函数
})
}
function setBullet(){
$bullets.removeClass('active') //全部去掉.active
.eq(pageIndex) //点击的那个
.addClass('active') //添加.active
}
//自动轮播部分
// setInterval(function(){
// playNext(1)
// },3000)
网友评论