用过很多轮播的插件，bootstrap的 bootstrap-carousel.js、unslider，用在手机端的swiper，各种效果的slide 以及各种特效网站的轮播代码，其实我只需要一个，方便就好，所以花了点时间自己做了一个。 看起来是无限循环的效果，实际用了一点点小技巧。#just start a damn project#
布局很简单，一个绝对定位+left值的变化就可以实现轮播了，至于控制速度，首先想到的使用JavaScript Math.cos()函数来做到控制速度曲线的的变化达到 慢-快-慢的效果，后来去洗手间的时候想到一更简单的方法，CSS3的transition不是可以控制速度最简单最快捷的方法么。
于是有了下面的JavaScript代码
增加了自动播放和指示点控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
body {
padding: 0;
margin: 0;
}
.shuff {
position: relative;
overflow: hidden;
height: 336px;
width: 730px;
margin: 0 auto;
}
.shuff .slidebox {
position: absolute;
top: 0;
left: -730px;
margin: 0;
padding: 0;
}
.shuff .slidebox.transition {
transition: left .3s ease-in-out 0s;
-webkit-transition: left .3s ease-in-out 0s;
}
.shuff .slidebox.transition.nonetransition {
transition: none;
-webkit-transition:none;
}
.shuff .slidebox::after {
content: "";
display: block;
clear: left;
visibility: hidden;
line-height: 336px;
}
.shuff .slidebox li {
display: inline-block;
margin: 0;
padding: 0;
float: left;
list-style-type: none;
list-style: none;
}
.shuff .slidebox li>a {
display: block;
}
.shuff .slidebox li>a>img {
display: block;
}
.shuff .ctrlbox {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.shuff .ctrlbox span,
.shuff .flip {
background-image: url(./banner.png);
}
.shuff .ctrlbox span {
margin: 0 5px;
padding: 5px;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
cursor: pointer;
color: #fff;
background-position: 0px -3px;
}
.shuff .ctrlbox span.active,
.shuff .ctrlbox span:hover {
background-position: -19px -3px;
}
.shuff .flip {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
display: block;
width: 37px;
height: 65px;
display: block;
background-color: #fff;
cursor: pointer;
background-color: transparent;
}
.shuff .flip.prev {
visibility: hidden;
left: 0;
background-position: 0px -18px;
}
.shuff .flip.prev:hover {
background-position: 0px -88px;
}
.shuff .flip.next {
visibility: hidden;
right: 0;
background-position: 0px -167px
}
.shuff .flip.next:hover {
background-position: 0px -237px
}
.shuff:hover .flip {
visibility: visible;
/* 悬停的时候显示翻页 */
}
</style>
</head>
<body>
<div class="shuff">
<ul class="slidebox transition" id="topShuff">
<li>
<a href="#" title="主题1"><img src="aaa.jpg" alt="" /></a>
</li>
<li>
<a href="#" title="主题2"><img src="bbb.jpg" alt="" /></a>
</li>
<li>
<a href="#" title="主题3"><img src="ccc.jpg" alt="" /></a>
</li>
<li>
<a href="#" title="主题4"><img src="ddd.jpg" alt="" /></a>
</li>
<li>
<a href="#" title="主题5"><img src="eee.jpg" alt="" /></a>
</li>
<li>
<a href="#" title="主题6"><img src="fff.jpg" alt="" /></a>
</li>
<li>
<a href="#" title="主题7"><img src="ggg.jpg" alt="" /></a>
</li>
</ul>
</div>
<script>
// 计算总宽度，赋值width和left偏移 & 插入控制点和左右翻页的箭头
function Slide(elementId, hasCtrlPoints, isFlip, isAutoPlay) {
this.element = elementId;
this.slideBox = null;
this.shfirstChild = null;
this.shlastChild = null;
this.boxWidth = 0;
this.offsetLeft = 0;
this.count = 0;
this.ctrlBox = null;
this.intervalId = 0;
Slide.prototype.init = function() {
this.slideBox = document.getElementById(this.element);
if (this.slideBox.childNodes.length > 0) { // 初始化变量 复制两个节点并插入 无限循环滚动使用
this.count = this.slideBox.querySelectorAll('li').length;
this.shfirstChild = this.slideBox.querySelector('li').cloneNode(true);
this.shlastChild = this.slideBox.querySelectorAll('li:last-child')[0].cloneNode(true);
this.slideBox.appendChild(this.shfirstChild);
this.slideBox.insertBefore(this.shlastChild, this.slideBox.firstChild);
this.boxWidth = this.shfirstChild.clientWidth;
if (this.boxWidth !== 0 && this.count > 1) {
this.slideBox.style.width = this.boxWidth * (this.count + 2) + 'px';
this.offsetLeft = '-' + this.boxWidth + 'px';
this.slideBox.style.left = this.offsetLeft;
} else if (this.boxWidth !== 0 && this.count <= 1) {
this.slideBox.style.width = this.boxWidth * this.count + 'px';
}
}
if (hasCtrlPoints) { //添加小点点
var ctrlBox = document.createElement('div');
ctrlBox.className = "ctrlbox";
for (var i = 0; i < this.count; i++) {
var ctrlItem = document.createElement('span');
ctrlItem.setAttribute('data-item', i);
if (i === 0) ctrlItem.className = "active";
ctrlBox.appendChild(ctrlItem);
}
this.slideBox.parentNode.appendChild(ctrlBox);
this.ctrlBox = this.slideBox.parentNode.querySelector('.ctrlbox');
this.addDotEvent();
}
if (isFlip) { // 添加两边的翻页箭头
var prev = document.createElement('a'),
next = document.createElement('a');
prev.className = 'flip prev';
next.className = 'flip next';
this.slideBox.parentNode.appendChild(prev);
this.slideBox.parentNode.appendChild(next);
this.addFlipEvent();
}
if (isAutoPlay) { // 自动翻页 5秒
this.setAutoPlay();
}
};
Slide.prototype.activeCtrl = function(direction) { // 改变点点的状态
if (this.ctrlBox === null) return;
var ctrlItems = this.ctrlBox.querySelectorAll('span');
var indexMark = 0;
for (var i = 0; i < ctrlItems.length; i++) {
if (ctrlItems.item(i).className === 'active') {
ctrlItems.item(i).className = '';
indexMark = i;
}
}
indexMark += direction ? 1 : -1;
indexMark = (indexMark === ctrlItems.length) ? 0 : indexMark;
indexMark = (indexMark === -1) ? (ctrlItems.length - 1) : indexMark;
ctrlItems.item(indexMark).className = 'active';
};
Slide.prototype.goNext = function() { // 向后翻
this.offsetLeft = parseInt(this.offsetLeft) - this.boxWidth + 'px';
this.slideLeft(this.offsetLeft);
this.slideBox.className = 'slidebox transition';
if (parseInt(this.offsetLeft) === -this.boxWidth * (this.count + 1)) {
var _this = this;
setTimeout(function() {
_this.slideBox.className += ' nonetransition';
_this.offsetLeft = '-' + _this.boxWidth + 'px';
_this.slideBox.style.left = _this.offsetLeft;
}, 380);
}
this.activeCtrl(true);
};
Slide.prototype.goPrev = function() { // 向前翻
this.offsetLeft = parseInt(this.offsetLeft) + this.boxWidth + 'px';
this.slideLeft(this.offsetLeft);
this.slideBox.className = 'slidebox transition';
if (parseInt(this.offsetLeft) === this.boxWidth * 0) {
var _this = this;
setTimeout(function() {
_this.slideBox.className += ' nonetransition';
_this.offsetLeft = '-' + (_this.boxWidth * _this.count) + 'px';
_this.slideBox.style.left = _this.offsetLeft;
}, 380);
}
this.activeCtrl(false);
};
Slide.prototype.addFlipEvent = function() { // 给箭头添加事件
var prevBtn = this.slideBox.parentNode.querySelector('.flip.prev');
var nextBtn = this.slideBox.parentNode.querySelector('.flip.next');
var _this = this;
nextBtn.addEventListener('click', function(event) {
_this.goNext();
if (isAutoPlay) _this.clearIntervalId();
});
prevBtn.addEventListener('click', function(event) {
_this.goPrev();
if (isAutoPlay) _this.clearIntervalId();
});
};
Slide.prototype.slideLeft = function(offsetLeft) {
this.slideBox.style.left = offsetLeft;
};
this.setOffsetLeft = function(offsetLeft) { // 必须在这里修改变量 事件处理函数的作用域处理不了
this.offsetLeft = offsetLeft;
};
this.clearIntervalId = function() { // 点击完毕停止自动播放 5秒后恢复
console.log(this.intervalId);
clearInterval(this.intervalId);
this.setAutoPlay();
};
this.setAutoPlay = function() {
var _this = this;
this.intervalId = setInterval(function() {
_this.goNext();
}, 5000);
};
Slide.prototype.addDotEvent = function() { //给小点点添加事件
if (this.ctrlBox === null) return;
var ctrlItems = this.ctrlBox.querySelectorAll('span');
var _this = this;
for (var i = 0; i < ctrlItems.length; i++) {
ctrlItems.item(i).addEventListener('click', function(event) {
var pos = (-(parseInt(event.target.getAttribute('data-item')) + 1) * _this.boxWidth) + 'px';
_this.setOffsetLeft(pos);
_this.slideLeft(pos);
var siblings = event.target.parentNode.querySelectorAll('span');
for (var i = 0; i < siblings.length; i++) {
siblings.item(i).className = '';
}
event.target.className = 'active';
});
}
};
}
window.onload = function() {
var shuff = new Slide('topShuff', true, true, true);
shuff.init();
}
</script>
</body>
</html>在初始化的时候在slideBox中插入了两个节点，这样在最后的图上再点next的时候视觉上感觉在向后滚动，动画完毕之后悄悄将图换成第一个的位置， 往前换是相同的原理; 动画效果用transition实现，在末尾和最前面的特殊位置滚动完毕悄悄换位置的短暂瞬间transition效果是禁止的。
效果
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
