題目1 輪播的實現(xiàn)原理是怎樣的？如果讓你來實現(xiàn)，你會抽象出哪些函數(shù)(or接口供使用？（比如 play()）
- 和iOS的實現(xiàn)原理一樣，在要循環(huán)輪播的一組圖片的第一張加上此組圖片的最后一張，在此組圖片的最后一張后面加上第一張。這樣就當用戶從第一張向左滾動時，看到的此組最后一張圖片，其實是你添加的此組最后一張圖片，等到滾動完成后，直接改變位置（用戶是看不到這個效果的），這時候才真正是此組最后一張圖片。最后一張向后滾動如是。
- 設(shè)置向下一張滾動的方法playNext()
- 設(shè)置向上一張滾動的方法playPre()
- 設(shè)置顯示當前頁數(shù)的方法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跳到相對應(yīng)圖片
$('.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跳到相對應(yīng)圖片
$('.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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
