一、輪播的實現原理以及抽象出哪些函數(or接口)供使用？
- 輪播的實現原理
- 把需要展示的圖片放到同一行。
- 創建一個可視化窗口，窗口之外的區域隱藏。
- 在第一張圖片的前面克隆最后一個圖片元素，在最后一個圖片后面克隆第一個元素。
- 利用jQuery動畫以及定位就能實現無限循環的輪播。
- 抽象出來的函數
- play(playPre()、playNext())
- setBullet()（點擊下面的小橫線或者圖片的縮略圖進行播放）
二、實現左右滾動無限循環輪播效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無限輪播</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.rotation{
position: relative;
width: 600px;
height: 350px;
overflow: hidden;
margin: 30px auto;
text-align: center;
}
.rotation .img-ct{
position: absolute;
/*width: 2400px;*/
/*寬度用js動態來寫，不寫死。圖片排成一行*/
height: 350px;
}
.rotation .img-ct>li{
float: left;
}
.rotation img{
width: 600px;
height: 350px;
}
.rotation .btn{
position: absolute;
top: 50%;
transform: translate(-50%);
border-radius: 50%;
display: inline-block;
width: 40px;
height: 40px;
color: #fff;
font-size: 25px;
line-height: 40px;
background: #4E443C;
opacity: 0.7;
}
.rotation .btn:hover{
opacity: .4;
}
.rotation .btn-pre{
left: 40px;
}
.rotation .btn-next{
right: 0px;
}
.rotation .slide{
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 10px;
text-align: center;
}
.rotation .slide>li{
height: 5px;
width: 20px;
background: #fff;
display: inline-block;
border-radius: 5px;
cursor: pointer;
}
.rotation .slide .active{
background: #333;
opacity: .7;
}
</style>
</head>
<body>
<div class="rotation">
<ul class="img-ct clearfix">
<li key="0"><a href="#"></a></li>
<li key="1"><a href="#"></a></li>
<li key="2"><a href="#"></a></li>
<li key="3"><a href="#"></a></li>
</ul>
<a class="btn btn-pre" href="#"><</a>
<a class="btn btn-next" href="#">></a>
<ul class="slide">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var $imgCt = $('.rotation .img-ct'),
$slide = $('.slide'),
$btnPre = $('.rotation .btn-pre'),
$btnNext = $('.rotation .btn-next');
var imgLen = $imgCt.children().length; // 4
var key = 0;
var isAnimate = false;
var $firstImg = $imgCt.find('li').first(),
$lastImg = $imgCt.find('li').last();
$imgCt.append($firstImg.clone());
$imgCt.prepend($lastImg.clone());
$imgCt.width((imgLen+2)*$firstImg.width());
$imgCt.css('left', 0-$firstImg.width());
// 點擊左右圖標輪播
$btnPre.on('click', function(e) {
e.preventDefault();
playPre();
// console.log(key);
})
$btnNext.on('click', function(e) {
e.preventDefault();
playNext();
// console.log(key);
})
// 點擊下面的小橫線輪播
$slide.find('li').on('click', function(e) {
e.preventDefault();
var clickIndex = $(this).index();
if(clickIndex < key) {
playPre(clickIndex);
}else if(clickIndex > key){
playNext(clickIndex);
}else{
return;
}
})
function playPre(index) {
if(isAnimate) {
return;
}
isAnimate = true;
switch (typeof index)
{
case 'undefined':
$imgCt.animate({
left: '+=600px', // 別寫成'+= 600px'
}, function() {
key--;
if(key < 0) {
$imgCt.css('left', 0-(imgLen*$firstImg.width()));
key = imgLen -1;
}
setSlide();
isAnimate = false;
})
break;
case 'number':
clickSlide(index);
break;
}
}
function playNext(index) {
if(isAnimate) {
return;
}
isAnimate = true;
switch (typeof index)
{
case 'undefined':
$imgCt.animate({
left: '-=600px',
}, function() {
key ++;
if(key == imgLen) {
$imgCt.css('left', '-600px');
key = 0;
}
setSlide();
isAnimate = false;
})
break;
case 'number':
clickSlide(index);
break;
}
// setSlide(); 動畫是異步的，放在這里執行的時候，key還沒有改變
// isAnimate = false; 動畫是異步的！！！！！等動畫完成之后再置為false
}
function clickSlide(index) {
var leftOffset= -(index+1)*$firstImg.width();
$imgCt.animate({
'left': leftOffset,
}, function() {
key = index;
setSlide();
isAnimate = false;
})
}
function setSlide() {
$('.rotation .slide').find('li').removeClass('active').eq(key).addClass('active');
console.log('key:' + key);
}
// 代碼寫的不是很美，但是基本功能都實現了，有待改善。
</script>
</body>
</html>
三、實現一個漸變輪播效果效果范例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漸變效果的輪播</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.carousel{
position: relative;
width: 890px;
height: 500px;
overflow: hidden;
margin: 30px auto 0 auto;
}
.carousel .img-ct{
position: relative;
height: 500px;
}
.carousel .img-ct>li{
position: absolute;
display: none;
}
.carousel .img-ct img{
width: 890px;
}
.carousel .btn{
position: absolute;
top: 50%;
transform: translate(-50%);
border-radius: 50%;
display: inline-block;
width: 40px;
height: 40px;
color: #fff;
font-size: 25px;
line-height: 40px;
background: #4E443C;
opacity: 0.7;
text-align: center;
}
.carousel .btn:hover{
opacity: .4;
}
.carousel .btn-before{
left: 40px;
}
.carousel .btn-after{
right: 0px;
}
.thubms{
margin: 0 auto 30px auto;
width: 870px;
height: 80px;
}
.thubms .sample{
height: 80px;
padding: 10px 0;
margin: 0 -10px;
background: #000;
/*opacity: .4;*/
}
.thubms .sample li{
width: 100px;
height: 80px;
float: left;
margin-left: 10px;
opacity: 0.4;
cursor: pointer;
}
.thubms .sample li:hover{
opacity: 1;
}
.thubms .sample li img{
width: 100px;
height: 80px;
/*opacity: 0.4;*/
}
.thubms .sample .selected{
opacity: 1 !important;
/*background: '';*/
}
</style>
</head>
<body>
<div class="carousel clearfix">
<ul class="img-ct clearfix">
<li key="0"><a href="#"></a></li>
<li key="1"><a href="#"></a></li>
<li key="2"><a href="#"></a></li>
<li key="3"><a href="#"></a></li>
<li key="4"><a href="#"></a></li>
<li key="5"><a href="#"></a></li>
<li key="6"><a href="#"></a></li>
<li key="7"><a href="#"></a></li>
</ul>
<a class="btn btn-before" href="#"><</a>
<a class="btn btn-after" href="#">></a>
</div>
<div class="thubms">
<ul class="sample clearfix">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var $carousel = $('.carousel .img-ct').children(),
$btnBefore = $('.btn-before'),
$btnAfter = $('.btn-after'),
$thubms = $('.thubms .sample').children(),
thubmsNumber = $('.thubms .sample').children().length;
var currentKey = 0;
var playing = false;
console.log($carousel);
play(0);
autoPlay();
$btnBefore.on('click', playBefore);
$btnAfter.on('click', playAfter);
$thubms.on('click', function() {
var clickIndex = $(this).index();
play(clickIndex);
})
function autoPlay() {
var beginPlay = setInterval("playAfter()", 3000);
}
function playBefore() {
play((thubmsNumber + currentKey - 1)%thubmsNumber);
}
function playAfter() {
console.log(currentKey+1);
console.log(thubmsNumber);
console.log((currentKey+1)%thubmsNumber);
play((currentKey+1)%thubmsNumber);
console.log(currentKey);
}
function play(index) {
// if(playing) return;
console.log(index);
if(!playing) {
playing = true;
$carousel.eq(currentKey).fadeOut(400);
$carousel.eq(index).fadeIn(400, function() {
playing = false; // 動畫異步
});
currentKey = index;
setSample(index, currentKey);
}
}
function setSample(currentKey) {
console.log(currentKey);
$thubms.removeClass('selected').eq(currentKey).addClass('selected');
}
</script>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
