1： 輪播的實(shí)現(xiàn)原理是怎樣的？如果讓你來實(shí)現(xiàn)，你會(huì)抽象出哪些函數(shù)(or接口)供使用？（比如 play()）
實(shí)現(xiàn)原理：
將輪播的圖片都水平排列，復(fù)制第一張和最后一張圖片分別放到最后面和最前面，當(dāng)滾動(dòng)到復(fù)制的兩個(gè)圖片時(shí)，回到原圖片的位置。
接口：
playNext() //輪播到下一張圖片
playPre() //輪播到上一張圖片
setBullet() //激活點(diǎn)擊的按鈕
2： 實(shí)現(xiàn)視頻中的左右滾動(dòng)無限循環(huán)輪播效果
<script>
$prebtn = $('a.pre');
$nextbtn = $('a.next');
$imgCt = $('.img-ct');
$imgs = $('.img-ct>li');
$bullets = $('.bullet li');
var pageIndex = 0;
var isanimate = false;
$imgCount = $imgs.length;
$imgWidth = $imgs.width();
$imgCt.append($imgs.first().clone());
$imgCt.prepend($imgs.last().clone());
$imgCt.width(($imgCount + 2) * $imgWidth);
$imgCt.css({left: -$imgWidth});
$prebtn.on('click',function(){
imgPre(1);
});
$nextbtn.on('click',function(){
imgNext(1);
});
function imgPre(len){
if(isanimate) return;
isanimate = true;
$imgCt.animate({
left: '+=' + len*$imgWidth
},function(){
pageIndex-=len;
if(pageIndex < 0){
pageIndex = 3;
$imgCt.css({left:-($imgCount)*$imgWidth});
}
setBullet();
isanimate = false;
});
}
function imgNext(len){
if(isanimate) return;
isanimate = true;
$imgCt.animate({
left: '-=' + len*$imgWidth
},function(){
pageIndex+=len;
if(pageIndex > 3){
pageIndex = 0;
$imgCt.css({left:-$imgWidth});
}
setBullet();
isanimate = false;
});
}
function setBullet(){
$bullets.removeClass('active')
.eq(pageIndex).addClass('active');
}
$bullets.on('click',function(){
$bullets.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
console.log(index);
if(index > pageIndex){
imgNext(index - pageIndex);
}
if(index < pageIndex){
imgPre(pageIndex - index);
}
})
</script>
3： 實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例
主要是利用fadeIn和fadeOut函數(shù)，另外需要注意一下css的寫法，如果是采用注釋掉的寫法，漸變過程會(huì)有空白，而第二種則會(huì)好很多。我的天，好神奇。
code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>輪播</title>
<style>
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
/*div.carousel {
width: 350px;
height: 200px;
overflow: hidden;
position: relative;
}
ul.img-ct {
width: 350px;
}
ul.img-ct li {
display: none;
}
ul.img-ct li:first-child {
display: list-item;
}
ul.img-ct li img {
width: 350px;
height: 200px;
}*/
div.carousel{
position: relative;
width: 350px;
height: 200px;
}
div.carousel ul.img-ct{
position: relative;
}
div.carousel ul.img-ct img{
width: 350px;
height: 200px;
}
div.carousel .img-ct li{
position: absolute;
display: none;
}
ul.img-ct li:first-child {
display: list-item;
}
.arrow {
display: inline-block;
text-decoration: none;
color: white;
width: 40px;
height: 40px;
border: 1px solid white;
border-radius: 50%;
text-align: center;
line-height: 40px;
}
.arrow:hover {
opacity: 0.8;
}
a.pre {
position: absolute;
top: 50%;
left: 10px;
margin-top: -20px;
}
a.next {
position: absolute;
top: 50%;
right: 10px;
margin-top: -20px;
}
ul.bullet::after {
content: '';
display: block;
clear: both;
}
ul.bullet li {
border: 1px solid green;
width: 30px;
height: 5px;
float: left;
margin: 3px;
border-radius: 3px;
cursor: pointer;
}
ul.bullet {
position: absolute;
left: 50%;
bottom: 10px;
transform: translate(-50%,0);
}
ul.bullet li.active {
background: #ccc;
}
</style>
</head>
<body>
<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 class="pre arrow" href="#"><</a>
<a class="next arrow" href="#">></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
$prebtn = $('a.pre');
$nextbtn = $('a.next');
$imgCt = $('.img-ct');
$imgs = $('.img-ct>li');
$bullets = $('.bullet li');
var curIndex = 0;
var isanimate = false;
$imgCount = $imgs.length;
$imgWidth = $imgs.width();
// showImg(0);
// autoPlay();
$prebtn.on('click',function(){
showImg(($imgCount + curIndex - 1) % $imgCount);
});
$nextbtn.on('click',function(){
showImg((curIndex + 1) % $imgCount);
});
function showImg(index){
if(isanimate) return;
isanimate = true;
$imgs.eq(curIndex).fadeOut(500);
$imgs.eq(index).fadeIn(500,function(){
isanimate =false;
});
curIndex = index;
console.log(curIndex);
setBullet();
}
function setBullet(){
$bullets.removeClass('active')
.eq(curIndex).addClass('active');
}
$bullets.on('click',function(){
var index = $(this).index();
console.log(index);
showImg(index);
})
function autoPlay(){
setInterval(function(){
showImg((curIndex + 1) % $imgCount);
}, 2000);
}
</script>
</body>
</html>
