其实从培训机构学习的时候就交手写轮播，工作两年就没有自己不参考任何文章去写一个出来，正好这段时间想好好学学面向对象，于是写了一个轮播，废话少说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="carousel.js"></script>
<style>
div,ul,li{
margin: 0;
padding: 0;
}
#outer{
transition: 0.5s all;
width: 1000px;
overflow: hidden;
position: relative;
}
#carousel{
left:0%;
transition: 0.5s all;
position: relative;
height:600px;
width: 100000px;
overflow: hidden;
}
#carousel li{
transition: 0.5s all;
letter-spacing: 4px;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 600px;
float: left;
width: 1000px;
height: 600px;
list-style: none;
}
#btns button{
position: absolute;
top:300px
}
#btns button:first-child{
left: 0;
}
#btns button:last-child{
right: 0;
}
#port{
position: absolute;
bottom:0;
text-align: -webkit-center;
width: 100%;
}
#port span{
cursor: pointer;
display: block;
height:10px;
width:10px;
background-color: #fff;
border:1px solid #eee;
border-radius: 50%;
float: left;
margin:10px 0 10px 4px
}
.setcolor{
background-color: #666 !important;
border:1px solid transparent;
}
.returncolor{
background-color: #fff !important;
border:1px solid #eee;
}
</style>
</head>
<body>
<div style="width: 100%;text-align: -webkit-center">
<div id="outer">
<ul id="carousel">
<li style="background: blue;display: none">第四屏(tt)</li>
<li style="background: green">第一屏(ljz)</li>
<li style="background: red">第二屏(zss)</li>
<li style="background: pink">第三屏(ljy)</li>
<li style="background: blue">第四屏(tt)</li>
<li style="background: green">第一屏(ljz)</li>
</ul>
<div id="port">
<div style="overflow: hidden;width: 80px">
<span οnclick="carousel.getCurrentPage(0)"></span>
<span οnclick="carousel.getCurrentPage(1)"></span>
<span οnclick="carousel.getCurrentPage(2)"></span>
<span οnclick="carousel.getCurrentPage(3)"></span>
</div>
</div>
<div id="btns">
<button οnclick="carousel.btnnext()">prev</button>
<button οnclick="carousel.btnprev()">next</button>
</div>
</div>
</div>
<script>
var carousel = new carouselModel({imageID:'carousel'})
carousel.makeArrInit()
carousel.autoRunning()
// carousel.changeCarouselArr('btnnext')
</script>
</body>
</html>
引入js
// it's ljz carousel designed
var carouselModel = function (data) {
this.imageID = data.imageID
this.makeArr = []
this.nums = ''
this.carousel = ''
this.pageNumsArr = []
this.pageIndex = 0
this.rexNumber = function () {
if (typeof this.imageID !== 'string' || this.imageID === '') {
console.log('imageID格式错误')
return
}
}
this.makeArrInit = function () {
this.rexNumber()
let eleID = document.getElementById(this.imageID)
this.carousel = eleID
let eles = eleID.getElementsByTagName('li')
let numsarr = document.getElementById('port').getElementsByTagName('span')
for (let i in eles) {
if (typeof eles[i] === 'object') {
this.makeArr.push(eles[i])
}
if (typeof numsarr[i] === 'object') {
this.pageNumsArr.push(numsarr[i])
}
}
this.pageNumsArr[0].className = 'setcolor'
}
this.btnprev = function () {
let cleft = this.carousel.style.left
cleft = cleft.replace(/%/,'')
this.nums = this.carousel.style.left.replace(/%/,'').replace(/-/,'')/100
if(this.nums<this.makeArr.length - 3){
this.carousel.style.left = cleft - 100 +'%'
this.pageIndex ++
}else{
console.log(this.pageIndex)
this.carousel.style.left = '0%'
this.nums = ''
this.pageIndex = 0
}
this.setNumsArrColor()
}
this.btnnext = function () {
let cleft = this.carousel.style.left
cleft = cleft.replace(/%/, '')
this.nums = this.carousel.style.left.replace(/%/, '').replace(/-/, '') / 100
if (this.nums === 0) {
this.carousel.style.left = '-' + (this.makeArr.length - 1) * 100 + '%'
this.pageIndex = this.makeArr.length - 1
} else if (this.nums > 0) {
this.pageIndex --
this.carousel.style.left = parseInt(cleft) + 100 + '%'
}
this.setNumsArrColor()
}
this.autoRunning = function (callback) {
let _this = this
setTimeout(function () {
// _this.btnprev()
_this.autoRunning()
},6000)
}
this.setNumsArrColor = function () {
for(let i in this.pageNumsArr){
this.pageNumsArr[i].className = 'returncolor'
}
this.pageNumsArr[this.pageIndex].className = 'setcolor'
}
this.getCurrentPage = function (index) {
this.carousel.style.left = (index) * -100 + '%'
this.pageIndex = index
this.setNumsArrColor()
}
this.changeCarouselArr = function (type) {
if(type === 'btnprev') {
let splitenum = this.makeArr.splice(this.makeArr.length - 1,1)
console.log(splitenum[0].innerText)
this.makeArr.unshift(splitenum[0])
for(let i in this.makeArr){
console.log('for:' + this.makeArr[i].innerText)
}
} else if (type === 'btnnext') {
let splitenum = this.makeArr.splice(0, 1)
console.log(splitenum[0].innerText)
this.makeArr.push(splitenum[0])
for (let i in this.makeArr) {
console.log('for:' + this.makeArr[i].innerText)
}
}
}
}
其实写的不怎么样，不是无缝轮播，但是写完后对面向对象有了进一步的了解。 | 
转播
