轮播的实现
2017-04-03 本文已影响13人
GaoYangTongXue丶
题目1 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口供使用？（比如 play()）
- 和iOS的实现原理一样，在要循环轮播的一组图片的第一张加上此组图片的最后一张，在此组图片的最后一张后面加上第一张。这样就当用户从第一张向左滚动时，看到的此组最后一张图片，其实是你添加的此组最后一张图片，等到滚动完成后，直接改变位置（用户是看不到这个效果的），这时候才真正是此组最后一张图片。最后一张向后滚动如是。
- 设置向下一张滚动的方法playNext()
- 设置向上一张滚动的方法playPre()
- 设置显示当前页数的方法setCurrentPage()
题目2：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gaoyang</title>
<style>
.contain {
position: relative;
width: 500px;
height: 400px;
margin: 50px auto;
overflow: hidden;
}
.cycle {
position: absolute;
margin: 0;
list-style: none;
padding: 0;
width: 3000px;
height: 100%;
overflow: hidden;
}
.cycle>li {
width: 500px;
height: 100%;
margin: 0;
padding: 0;
float: left;
font-size: 0;
}
.cycle>li img {
width: 100%;
height: 100%;
}
.btn {
display: inline-block;
position: absolute;
color: #fff;
text-decoration: none;
width: 60px;
height: 60px;
border-radius: 30px;
background: #333;
opacity: 0.7;
text-align: center;
font-size: 25px;
top: 170px;
}
.btn-pre {
left: 20px;
}
.btn-next {
right: 20px;
}
.btn span {
display: block;
margin-top: 8px;
}
.page {
position: absolute;
width: 100%;
bottom: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.page>li {
display: inline-block;
margin: 5px;
padding: 0;
/*float: left;*/
width: 20px;
height: 6px;
background-color: #333;
border-radius: 5px;
cursor: pointer;
font-size: 0;
}
.page>li>a {
display: inline-block;
width: 100%;
height: 100%;
text-decoration: none;
}
.page>li.active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="contain">
<ul class='cycle'>
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
</ul>
<a href="javascript:;" class="btn btn-pre"><span><</span></a>
<a href="#" class="btn btn-next"><span>></span></a>
<ul class="page">
<li class="active">
<!--<a href="javascript:;"></a>-->
</li>
<li>
<!--<a href="javascript:;"></a>-->
</li>
<li>
<!--<a href="javascript:;"></a>-->
</li>
<li>
<!--<a href="javascript:;"></a>-->
</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
var $cycle = $('.cycle');
$cycle.css('left', '-500px');
var $btnNext = $('.btn.btn-next');
var $btnPre = $('.btn.btn-pre');
var $pageCon = $('.page');
var currentPage = 0;
var continueP = true;
//点击下一张
$btnNext.on('click', function (e) {
e.preventDefault()
playNext();
})
//点击上一张
$btnPre.on('click', function () {
playPre();
})
//点击page跳到相对应图片
$('.page>li').on('click', function () {
var index = $(this).index();
playPage(index);
})
function playPage(index) {
continueP = false;
$cycle.animate({ left: -(index + 1) * 500 }, function () {
currentPage = index;
continueP = true;
pageControll();
})
}
function playNext(n) {
if (!continueP) {
return;
};
continueP = false;
$cycle.animate({ left: '-=500' }, function () {
currentPage++;
if (currentPage === $cycle.children().length - 2) {
$cycle.css('left', '-500px');
currentPage = 0;
}
continueP = true;
pageControll();
})
}
function playPre(n) {
if (!continueP) {
return;
};
continueP = false;
$cycle.animate({ left: '+=500' }, function () {
currentPage--;
if (currentPage === -1) {
$cycle.css('left', -($cycle.children().length - 2) * 500);
currentPage = 3;
}
continueP = true;
pageControll();
})
}
function pageControll() {
$pageCon.children()
.removeClass('active')
.eq(currentPage)
.addClass('active');
}
</script>
</body>
</html>
题目3：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gaoyang</title>
<style>
.contain {
position: relative;
width: 500px;
height: 400px;
margin: 50px auto;
overflow: hidden;
}
.cycle {
position: relative;
margin: 0;
list-style: none;
padding: 0;
width: 500px;
height: 100%;
overflow: hidden;
}
.cycle>li {
position: absolute;
width: 500px;
height: 100%;
margin: 0;
padding: 0;
/*float: left;*/
font-size: 0;
z-index: -2;
display: none;
}
.cycle>li.active {
display: block;
}
.cycle>li img {
width: 100%;
height: 100%;
}
.btn {
display: inline-block;
position: absolute;
color: #fff;
text-decoration: none;
width: 60px;
height: 60px;
border-radius: 30px;
background: #333;
opacity: 0.7;
text-align: center;
font-size: 25px;
top: 170px;
}
.btn-pre {
left: 20px;
}
.btn-next {
right: 20px;
}
.btn span {
display: block;
margin-top: 8px;
}
.page {
position: absolute;
width: 100%;
bottom: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.page>li {
display: inline-block;
margin: 5px;
padding: 0;
/*float: left;*/
width: 20px;
height: 6px;
background-color: #333;
border-radius: 5px;
cursor: pointer;
font-size: 0;
}
.page>li>a {
display: inline-block;
width: 100%;
height: 100%;
text-decoration: none;
}
.page>li.active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="contain">
<ul class='cycle'>
<li class="active">
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
<li>
<a href="javascript:;"></a>
</li>
</ul>
<a href="javascript:;" class="btn btn-pre"><span><</span></a>
<a href="#" class="btn btn-next"><span>></span></a>
<ul class="page">
<li class="active">
<!--<a href="javascript:;"></a>-->
</li>
<li>
<!--<a href="javascript:;"></a>-->
</li>
<li>
<!--<a href="javascript:;"></a>-->
</li>
<li>
<!--<a href="javascript:;"></a>-->
</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
var $cycle = $('.cycle');
var $btnNext = $('.btn.btn-next');
var $btnPre = $('.btn.btn-pre');
var $pageCon = $('.page');
var currentPage = 0;
var continueP = true;
var timer;
var clearTimer;
//开始计时
setIn();
//点击下一张
$btnNext.on('click', function (e) {
e.preventDefault()
playNext();
clearIn();
})
//点击上一张
$btnPre.on('click', function () {
playPre();
clearIn();
})
//点击page跳到相对应图片
$('.page>li').on('click', function () {
var index = $(this).index();
playPage(index);
clearIn();
})
function playPage(index) {
$cycle.children().eq(currentPage).fadeOut(800)
currentPage = index;
$cycle.children().eq(currentPage).fadeIn(800, function () {
continueP = true;
pageControll();
if (clearTimer === timer) {
setIn();
}
})
}
function playNext(n) {
if (!continueP) {
return;
};
continueP = false;
$cycle.children().eq(currentPage).fadeOut(800)
currentPage++;
if (currentPage === $cycle.children().length) {
currentPage = 0;
}
$cycle.children().eq(currentPage).fadeIn(800, function () {
continueP = true;
pageControll();
if (clearTimer === timer) {
setIn();
}
})
}
function playPre(n) {
if (!continueP) {
return;
};
continueP = false;
$cycle.children().eq(currentPage).fadeOut(800)
currentPage--;
if (currentPage === -1) {
currentPage = 3;
}
$cycle.children().eq(currentPage).fadeIn(800, function () {
continueP = true;
pageControll();
if (clearTimer === timer) {
setIn();
}
})
}
function pageControll() {
$pageCon.children()
.removeClass('active')
.eq(currentPage)
.addClass('active');
}
function setIn() {
timer = setInterval(function () {
playNext();
}, 3000);
}
function clearIn() {
clearTimer = timer;
clearInterval(timer)
}
</script>
</body>
</html>
