淡入淡出的輪播
- slide-ul 是幻燈片的盒子 包括了所有的img position: relative;
- img position: absolute; 全部隱藏脾歇，默認(rèn)顯示第一張圖片
- pageIndex 分頁索引對應(yīng) img 的索引
- 在點(diǎn)擊分頁索引時(shí) 給對應(yīng)的 img 顯示池摧，其它的 img 隱藏
- 設(shè)置一個(gè)定時(shí)器函數(shù)每三秒執(zhí)行一次，每次都傳入 pageIndex 實(shí)現(xiàn)定時(shí)切換 默認(rèn)是 0 判斷 (pageIndex++ >= img.length) ? 0 : pageIndex++
- 鼠標(biāo)移入圖片清除定時(shí)器 鼠標(biāo)移出時(shí)重啟定時(shí)器
實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-slide-fadeIn</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
input,button,select,textarea{
outline:none;border: none;
}
a{
text-decoration: none;
color: #fff;
}
ul,li{
list-style: none;
}
img{
border: none;
}
.wrap{
width: 790px;
margin: 20px auto;
}
.slide-box{
height: 340px;
overflow: hidden;
position: relative;
}
.slide-left{
width: 100%;
position: relative;
}
.slide-left li{
position: absolute;
display: none;
}
.slide-left li a{
display: block;
}
.slide-left li a img{
width: 100%;
}
.slider-indicator{
position: absolute;
z-index: 1;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
font-size: 0;
padding: 4px 8px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.3);
}
.slider-indicator i{
display: inline-block;
margin-right: 10px;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
}
.slider-indicator i.page-active{
background-color: #2196F3;
}
.slide-btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: block;
width: 40px;
height: 50px;
line-height: 45px;
background-color: rgba(0,0,0,.2);
font-size: 20px;
text-align: center;
display: none;
}
.slider-prev{
left: 0;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.slider-next{
right: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="slide-box clearfix">
<ul class="slide-left"></ul>
<div class="slider-indicator"></div>
<a href="javascript:void(0)" class="slide-btn slider-prev"><</a>
<a href="javascript:void(0)" class="slide-btn slider-next">></a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script>
$(function(){
var data = [{
url: '#1',
img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'
},
{
url: '#2',
img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'
},
{
url: '#3',
img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'
},
{
url: '#4',
img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'
},
{
url: '#5',
img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'
}];
var slide = $('.slide-box');
var prev = $('.slider-prev');
var next = $('.slider-next');
var slideLeftData = $('.slide-left');
var slideIndicator = $('.slider-indicator');
var index = 0,slideAuto=null,isAnimate=false;
var slideData = ''; // 數(shù)據(jù)
var pageIndicator = ''; // page的小點(diǎn)
$.each(data, function(index, val) {
slideData += "<li data-id="+index+"><a href="+val.url+"></a></li>";
pageIndicator += "<i></i>";
});
slideLeftData.append(slideData); // 給左邊盒子添加圖片信息
slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active'); // 給第一個(gè)小點(diǎn)添加樣式
$('.slide-left li').eq(0).show();
prev.on('click', prevPage); // 點(diǎn)擊上一頁
next.on('click', nextPage); // 點(diǎn)擊下一頁
// 自動(dòng)運(yùn)行函數(shù)
var autoRun = function(){
slideAuto = setInterval(function(){
nextPage(index);
}, 3000)
}
autoRun();
// 上一頁
function prevPage(){
if(isAnimate){ return;}
isAnimate = true;
index--;
if(index < 0){
index = data.length -1;
}
slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();
slidePage(index);
isAnimate = false;
}
// 下一頁
function nextPage(){
if(isAnimate){ return;}
isAnimate = true;
index++;
if(index >= data.length){
index = 0;
}
slideLeftData.find('li').eq(index).fadeIn().siblings().fadeOut();
slidePage(index);
isAnimate = false;
}
// page
slideIndicator.on('mouseenter', 'i', function(){
var pageIndex = $(this).index();
index = pageIndex;
$(this).addClass('page-active').siblings().removeClass('page-active');
slideLeftData.find('li').eq(pageIndex).fadeIn().siblings().fadeOut();
});
// 獲取當(dāng)前page 并添加樣式
function slidePage(){
slideIndicator.find('i').eq(index).addClass('page-active').siblings().removeClass('page-active')
}
// 鼠標(biāo)移入時(shí)
slide.on('mouseenter', function(){
$('.slide-btn').show(); // 顯示左右的按鈕
clearInterval(slideAuto); // 清除定時(shí)器
});
// 鼠標(biāo)移出時(shí)
slide.on('mouseleave', function(){
$('.slide-btn').hide(); // 隱藏左右的按鈕
autoRun(); // 繼續(xù)運(yùn)行定時(shí)器
});
});
</script>
</body>
</html>
左右無縫切換的輪播
- slide-box 是包括幻燈片的盒子逻杖，設(shè)置overflow: hidden;
- slide-ul 是幻燈片的盒子（寬度為img的寬度*img的length） 包括了所有的img(浮動(dòng)在一行)
- 分別給 幻燈片的盒子 最前面克隆 img 的最后一個(gè)闻伶，最后面克隆 img 的第一個(gè) 4,0,1,2,3,4,0
- 此時(shí)克隆了兩個(gè)蓝翰，重新給圖片盒子寬度添加總長度， 給第0個(gè)寫一個(gè) left -img (一個(gè)寬度)就顯示真正的第一個(gè)圖片
- 每點(diǎn)擊下一頁時(shí) (pageIndex++ > imgLength -1) ? 0 : pageIndex++; 根據(jù)對應(yīng)的pageIndex操作 left
- 每點(diǎn)擊上一頁時(shí) (pageIndex-- < 0) ? imgLength-1 : pageIndex--; 在對應(yīng)的pageIndex操作 left
- 點(diǎn)擊到最后一個(gè)和最前面一個(gè)圖片時(shí)爆雹，在動(dòng)畫效果結(jié)果后操作css讓元素left值變成對應(yīng)克隆的對象left，造成一個(gè)無限切換的錯(cuò)覺
實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-slide-無縫滾動(dòng)</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
input,button,select,textarea{
outline:none;border: none;
}
a{
text-decoration: none;
color: #fff;
}
ul,li{
list-style: none;
}
img{
border: none;
}
.wrap{
width: 790px;
margin: 20px auto;
}
.slide-box{
height: 340px;
overflow: hidden;
position: relative;
}
.slide-ul{
width: 100%;
position: relative;
}
.slide-ul li{
width: 790px;
float: left;
}
.slide-ul li a{
display: block;
}
.slide-ul li a img{
width: 100%;
}
.slider-indicator{
position: absolute;
z-index: 1;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
font-size: 0;
padding: 4px 8px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.3);
}
.slider-indicator i{
display: inline-block;
margin-right: 10px;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
}
.slider-indicator i.page-active{
background-color: #2196F3;
}
.slide-btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: block;
width: 40px;
height: 50px;
line-height: 45px;
background-color: rgba(0,0,0,.2);
font-size: 20px;
text-align: center;
display: none;
}
.slider-prev{
left: 0;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.slider-next{
right: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="slide-box clearfix">
<ul class="slide-ul"></ul>
<div class="slider-indicator"></div>
<a href="javascript:void(0)" class="slide-btn slider-prev"><</a>
<a href="javascript:void(0)" class="slide-btn slider-next">></a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script>
$(function(){
var data = [{
url: '#1',
img: '//img11.360buyimg.com/da/jfs/t4657/90/3561484677/83893/f05ac312/59004d0dNc66933b4.png'
},
{
url: '#2',
img: '//img1.360buyimg.com/da/jfs/t5122/78/482212244/90225/c4ccd3b7/59001933Nb4a11a00.jpg'
},
{
url: '#3',
img: '//img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg'
},
{
url: '#4',
img: '//img20.360buyimg.com/da/jfs/t4249/102/1331521120/224199/40dcb547/58c0b221N5acfd3c6.jpg'
},
{
url: '#5',
img: '//img13.360buyimg.com/da/jfs/t5518/250/560655744/102051/9f4965b2/5901d835N6c3481c7.jpg'
}];
var slide = $('.slide-box'), // 幻燈片盒子
prev = $('.slider-prev'), // 上一頁按鈕
next = $('.slider-next'), // 下一頁按鈕
slideUl = $('.slide-ul'), // 圖片盒子
slideIndicator = $('.slider-indicator'), // 中部page盒子
pageIndex = 0, // page索引
slideAuto=null, // 自動(dòng)滾動(dòng)方法
isAnimate=false, // 事件鎖
slideData = '', // img數(shù)據(jù)變量
pageIndicator = ''; // page的小點(diǎn)變量
// 循環(huán)添加img數(shù)據(jù)和page小點(diǎn)的個(gè)數(shù)
$.each(data, function(index, val) {
slideData += "<li data-id="+index+"><a href="+val.url+"></a></li>";
pageIndicator += "<i></i>";
});
// 給盒子添加圖片信息
slideUl.append(slideData);
// 給page盒子添加小點(diǎn)并給第一個(gè)添加 page-active 樣式
slideIndicator.append(pageIndicator).find('i').eq(0).addClass('page-active');
// 默認(rèn)給第一個(gè)li添加顯示
$('.slide-ul li').eq(0).show();
// 獲取圖片盒子里面的 li 個(gè)數(shù)
var imgLength = slideUl.children().length;
// 分別給 圖片盒子 最前面克隆 li 最后一個(gè)脾歧，最后面克隆 li 第一個(gè) [4,0,1,2,3,4,0]
var lastLi = slideUl.find('li').last();
var firstLi = slideUl.find('li').first();
slideUl.prepend(lastLi.clone())
slideUl.append(firstLi.clone());
// 獲取克隆后圖片盒子里面的 li 個(gè)數(shù)
var countLength = slideUl.children().length;
// 單獨(dú)一個(gè)li的盒子寬度
var slideLiWidth = slideUl.find('li').width();
// 重新計(jì)算出 圖片盒子 的寬度 讓 li 浮動(dòng)在一行
var boxWidth = countLength * slideLiWidth;
// 給圖片盒子寬度添加總長度 然后第一個(gè)看到的是克隆的那個(gè)，所以給個(gè) - 一個(gè)li寬度 就顯示真正的第一個(gè)
slideUl.css({'left': -slide.width(), width: boxWidth});
// 點(diǎn)擊上一頁
prev.on('click', function(){
prevPage(1)
});
// 點(diǎn)擊下一頁
next.on('click', function(){
nextPage(1);
});
// 自動(dòng)運(yùn)行函數(shù)
var autoRun = function(){
slideAuto = setInterval(function(){
nextPage(1);
}, 3000)
}
autoRun();
// 上一頁
function prevPage(len){
if(isAnimate){ return;}
isAnimate = true;
pageIndex -=len;
// '-='+slideLiWidth 0 -790px -1580px -2370px -3160px -3950px
slideUl.animate({left: '+='+len*slideLiWidth },function(){
if( pageIndex < 0){
pageIndex = imgLength-1; // 獲取最后一個(gè)
slideUl.css({left: -slideLiWidth*imgLength}); // 默認(rèn)回到 -3950px 也就是第后一個(gè)
}
isAnimate = false;
slidePage(pageIndex); // 獲取當(dāng)前的 小點(diǎn) 狀態(tài)
});
}
// 下一頁
function nextPage(len){
if(isAnimate){ return;}
isAnimate = true;
pageIndex += len;
console.log( pageIndex )
// '-='+slideLiWidth -790px -1580px -2370px -3160px -3950px
slideUl.animate({left: '-='+len*slideLiWidth },function(){
// 判斷當(dāng)前索引是否等于img圖片的長度（沒克隆前的長度）
if(pageIndex > imgLength -1 ){
pageIndex = 0; // 給索引值設(shè)置為0 也就是當(dāng)前一個(gè)
slideUl.css({left: -slideLiWidth}); // 默認(rèn)回到 -790px 也就是第0個(gè)
}
isAnimate = false;
slidePage(pageIndex); // 獲取當(dāng)前的 小點(diǎn) 狀態(tài)
});
}
// 點(diǎn)擊切換
slideIndicator.on('click', 'i', function(){
var index = $(this).index();
$(this).addClass('page-active').siblings().removeClass('page-active');
if(pageIndex > index){ // 當(dāng)前page 大于 當(dāng)前索引
prevPage(pageIndex - index); // 向后移動(dòng)
}else{
nextPage(index - pageIndex); // 向前移動(dòng)
}
});
// 獲取當(dāng)前page 并添加樣式
function slidePage(){
slideIndicator.find('i').removeClass('page-active').eq(pageIndex).addClass('page-active')
}
// 鼠標(biāo)移入時(shí)
slide.on('mouseenter', function(){
$('.slide-btn').show(); // 顯示左右的按鈕
clearInterval(slideAuto); // 清除定時(shí)器
});
// 鼠標(biāo)移出時(shí)
slide.on('mouseleave', function(){
$('.slide-btn').hide(); // 隱藏左右的按鈕
autoRun(); // 繼續(xù)運(yùn)行定時(shí)器
});
});
</script>
</body>
</html>
制作簡書首頁的幻燈片
- 功能結(jié)合了淡入淡出和無縫滾動(dòng)
