淡入淡出轮播图（插件版）
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出效果轮播图</title>
<link rel="stylesheet" href="css/swiper.css">
<style>
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
</style>
</head>
<body>
<div id="swiper">
<ul class="swiper-wrapper">
<li class="swiper-item actived">
<img src="images/play/01.jpg" alt="图片">
</li>
<li class="swiper-item">
<img src="images/play/02.jpg" alt="图片">
</li>
<li class="swiper-item">
<img src="images/play/03.jpg" alt="图片">
</li>
<li class="swiper-item">
<img src="images/play/04.jpg" alt="图片">
</li>
<li class="swiper-item">
<img src="images/play/05.jpg" alt="图片">
</li>
</ul>
<ol class="pagination"></ol>
<div class="control-btns">
<div class="prev-btn"></div>
<div class="next-btn"></div>
</div>
</div>
<script src="js/swiper.js"></script>
<script>
swiper({
el: document.querySelector('#swiper'),
pagination: document.querySelector('#swiper .pagination'),
isAutoplay: true,
duration: 5000
});
</script>
</body>
</html>
css:
#swiper {
width: 900px;
height: 350px;
margin: 100px auto;
position: relative;
}
.swiper-item {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s;
}
.swiper-item.actived {
opacity: 1;
}
.swiper-item img {
display: block;
}
.pagination {
font-size: 0;
position: absolute;
right: 10px;
bottom: 10px;
}
.pagination li {
width: 20px;
height: 20px;
margin-right: 8px;
font-size: 14px;
border: 1px solid #fff;
border-radius: 50%;
text-align: center;
line-height: 20px;
color: #fff;
display: inline-block;
cursor: pointer;
}
.pagination li.actived {
border-color: #f60;
color: #fff;
background: #000;
}
.prev-btn, .next-btn {
width: 40px;
height: 100px;
margin-top: auto;
margin-bottom: auto;
background: url("../images/play/index.png") no-repeat;
cursor: pointer;
position: absolute;
top: 0;
bottom: 0;
}
.next-btn {
right: 0;
background-position-x: -50px;
}
JS：
(function (w) {
function swiper (obj) {
//获取swiper元素
var swiper = obj.el;
//获取定时的时间间隔
var duration = obj.duration || 5000;
//获取图片容器
var swiperItems = document.querySelectorAll('.swiper-item');
//给上一张图片控制按钮
var prevBtn = document.querySelector('.control-btns .prev-btn');
//给下一张图片控制按钮
var nextBtn = document.querySelector('.control-btns .next-btn');
//标记当前索引
var currentIndex = 0;
//设置定时标记
var timerId = null;
//创建分页按钮
if (obj.pagination) {
for (var i = 0; i < swiperItems.length; i ++) {
var li = document.createElement('li');
li.innerHTML = i + 1;
obj.pagination.appendChild(li);
}
//获取分页按钮
var paginationItems = document.querySelectorAll('.pagination li');
//给分页按钮绑定单击事件
paginationItems.forEach(function (paginationItem, index) {
paginationItem.addEventListener('click', function () {
currentIndex = index;
setPlay();
})
});
}
//上来先初始化
setPlay();
//给上一张图片控制按钮绑定单击事件
prevBtn.addEventListener('click', function () {
setPlay('up');
});
//给下一张图片控制按钮绑定单击事件
nextBtn.addEventListener('click', function () {
setPlay('down');
});
//设置自动轮播
if (obj.isAutoplay) {
timerId = setInterval(function () {
setPlay('down');
}, duration);
//鼠标放上停止轮播
swiper.addEventListener('mouseenter', function () {
clearInterval(timerId);
});
//鼠标离开继续轮播
swiper.addEventListener('mouseleave', function () {
timerId = setInterval(function () {
setPlay('down');
}, duration);
});
}
//封装函数，设置图片与分页按钮一一对应
function setPlay(direction) {
if (direction === 'up') {
currentIndex --;
if (currentIndex < 0) {
currentIndex = swiperItems.length - 1;
}
}else if (direction === 'down') {
currentIndex ++;
if (currentIndex > swiperItems.length - 1) {
currentIndex = 0;
}
}
//图片排他，分页按钮排他
swiperItems.forEach(function (swiperItem, index) {
swiperItem.classList.remove('actived');
if (obj.pagination) {
paginationItems[index].classList.remove('actived');
}
});
//当前图片显示
swiperItems[currentIndex].classList.add('actived');
if (obj.pagination) {
//当前分页按钮高亮
paginationItems[currentIndex].classList.add('actived');
}
}
}
//暴露方法
w.swiper = swiper;
})(window);
