<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 1120px;
height: 380px;
margin: 40px auto;
position: relative;
overflow: hidden;
}
li{
list-style-type: none;
}
.container ul li {
width: 1120px;
height: 380px;
line-height: 380px;
text-align: center;
font-size: 100px;
float: left;
}
.container ul li.active{
z-index: 2;
opacity: 1;
}
.container ul li.prev{
z-index: 1;
}
.container ul{
position: relative;
z-index: 0;
}
#btn{
width:100%;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
z-index: 1;
}
#btn span{
display: block;
width: 40px;
height: 40px;
line-height: 40px;
background: rgba(0,0,0,.6);
text-align: center;
color: #fff;
font-size: 20px;
}
#btn span:first-child{
float: left;
}
#btn span:last-child{
float: right;
}
#btnlist {
position: absolute;
z-index: 1;
top: 80%;
height: 20px;
width: 100%;
text-align: center;
margin-left: -10px;
}
#btnlist span{
width: 20px;
height: 20px;
display: inline-block;
background:rgba(0,0,0,.3);
border-radius: 50%;
margin-left: 20px;
transition: all .5s;
}
#btnlist span.active{
background:#ddd;
box-shadow: 0 0 5px #000;
width: 18px;
height: 18px;
margin-left: 21px;
margin-top: 1px;
}
#list{
width:6720px;
}
#list li{
float:left;
}
</style>
</head>
<body>
<div class="container" id="container">
<ul id="list">
<li style="background: brown">1</li>
<li style="background: pink">2</li>
<li style="background: orange">3</li>
<li style="background: greenyellow">4</li>
<li style="background: lightblue">5</li>
<li style="background: brown">1</li>
</ul>
<div id="btn">
<span class="left"><<</span>
<span class="right">>></span>
</div>
<div id="btnlist">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="move.js"></script>
<script>
// 1. 选择元素
// 当程序初始化的时候;
// 2. 绑定事件
// 绑定事件功能;
// 3. 事件处理函数;
// index;
// animate;
function Banner(){
}
Banner.prototype.init = function(itemlistselector,options){
// options = {
// leftselector:"",
// rightselector:"",
// btnlistselector:"",
// listMainselector:"";
// }
// 左右按钮选择 => 1. 选择正确为 dom对象; 2. 选择错误为null;
this.index = 0;
this.leftBtnElem = document.querySelector(options.leftselector);
this.rightBtnElem = document.querySelector(options.rightselector);
// 按钮列表 => 1. 选择正确为 dom组(伪数组) 2. 选择错误为 null;
this.btnlist = document.querySelectorAll(options.btnlistselector);
// 显示图片列表;
this.itemlist = document.querySelectorAll(itemlistselector); // *
this.listMain = document.querySelector(options.listMainselector);
this.handleEvent();
//所有逻辑的起始点;
}
Banner.prototype.handleEvent = function(){
// 事件绑定功能;
if(this.leftBtnElem != null){
this.leftBtnElem.onclick = function(){
this.changIndex("prev");
this.changItem();
}.bind(this);
}
if(this.rightBtnElem != null){
this.rightBtnElem.onclick = function(){
this.changIndex("next");
this.changItem("next");
}.bind(this);
}
if(this.btnlist != null){
for(var i = 0 ; i < this.btnlist.length ; i++){
(function(index){
this.btnlist[i].onmouseover = function(){
this.changIndex("moveTo",index);
this.changItem("moveTo",index);
}.bind(this)
}.bind(this))(i)
}
}
}
Banner.prototype.changIndex = function(type,i){
if(type === "prev"){
// index --
if(this.index == 0){
console.log(this.itemlist[0].offsetWidth , (this.itemlist.length - 1) );
this.listMain.style.left = -this.itemlist[0].offsetWidth * (this.itemlist.length - 1) + "px";
this.index = this.itemlist.length - 2;
}else{
this.index --;
}
}else if(type === "next"){
if(this.index == this.itemlist.length - 1){
this.listMain.style.left = 0;
this.index = 1;
}else{
this.index ++;
}
}else if(type === "moveTo"){
// this.index = this.index;
this.index = i;
}
// console.log(this.index);
}
Banner.prototype.changItem = function(){
//运动;
this.moving = true;
move(this.listMain,{
left : -this.itemlist[0].offsetWidth * this.index
});
if(this.btnlist != null){
for(var k = 0 ; k < this.btnlist.length ; k++){
this.btnlist[k].className = this.btnlist[k].className.replace("active","");
}
if(this.index > this.btnlist.length - 1){
this.btnlist[0].className = "active";
}else{
this.btnlist[this.index].className = "active";
}
}
}
var banner = new Banner();
banner.init("#list li",{
leftselector:".left",
rightselector:".right",
listMainselector:"#list",
btnlistselector:"#btnlist span"
});
</script>
</body>
</html>
这个代码注释没有第一篇轮播图插件详细
(可参考第一篇轮播图插件)