題目1 輪播的實(shí)現(xiàn)原理是怎樣的慢洋？如果讓你來(lái)實(shí)現(xiàn)副编，你會(huì)抽象出哪些函數(shù)(or接口供使用？（比如 play()）
- 和iOS的實(shí)現(xiàn)原理一樣，在要循環(huán)輪播的一組圖片的第一張加上此組圖片的最后一張涝影，在此組圖片的最后一張后面加上第一張。這樣就當(dāng)用戶(hù)從第一張向左滾動(dòng)時(shí)争占，看到的此組最后一張圖片燃逻，其實(shí)是你添加的此組最后一張圖片，等到滾動(dòng)完成后臂痕，直接改變位置（用戶(hù)是看不到這個(gè)效果的）伯襟，這時(shí)候才真正是此組最后一張圖片。最后一張向后滾動(dòng)如是握童。
- 設(shè)置向下一張滾動(dòng)的方法playNext()
- 設(shè)置向上一張滾動(dòng)的方法playPre()
- 設(shè)置顯示當(dāng)前頁(yè)數(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;
//點(diǎn)擊下一張
$btnNext.on('click', function (e) {
e.preventDefault()
playNext();
})
//點(diǎn)擊上一張
$btnPre.on('click', function () {
playPre();
})
//點(diǎn)擊page跳到相對(duì)應(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;
//開(kāi)始計(jì)時(shí)
setIn();
//點(diǎn)擊下一張
$btnNext.on('click', function (e) {
e.preventDefault()
playNext();
clearIn();
})
//點(diǎn)擊上一張
$btnPre.on('click', function () {
playPre();
clearIn();
})
//點(diǎn)擊page跳到相對(duì)應(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)容合作請(qǐng)聯(lián)系作者
