搞不明白,可能是做到少的原因,往后做的多可能就明白了

轮播图代码:

* {

padding: 0;

margin: 0;

list-style: none;

border: 0;

}

.all {

width: 500px;

height: 200px;

padding: 7px;

border: 1px solid #ccc;

margin: 100px auto;

position: relative;

}

.screen {

width: 500px;

height: 200px;

overflow: hidden;

position: relative;

}

.screen li {

width: 500px;

height: 200px;

overflow: hidden;

float: left;

}

.screen ul {

position: absolute;

left: 0;

top: 0px;

width: 3000px;

}

.all ol {

position: absolute;

right: 10px;

bottom: 10px;

line-height: 20px;

text-align: center;

}

.all ol li {

float: left;

width: 20px;

height: 20px;

background: #fff;

border: 1px solid #ccc;

margin-left: 10px;

cursor: pointer;

}

.all ol li.current {

background: #DB192A;

}

#arr {

display: none;

}

#arr span {

width: 40px;

height: 40px;

position: absolute;

left: 5px;

top: 50%;

margin-top: -20px;

background: #000;

cursor: pointer;

line-height: 40px;

text-align: center;

font-weight: bold;

font-family: '黑体';

font-size: 30px;

color: #fff;

opacity: 0.3;

border: 1px solid #fff;

}

#arr #right {

right: 5px;

left: auto;

}

//获取最外面的div

var box = my$("box")

//获取相框

var screen = box.children[0];

//获取相框的宽度

var imgWidth = screen.offsetWidth;

//获取ul

var ulObj = screen.children[0];

//获取ul中的所有的li

var list = ulObj.children;

//获取ol

var olObj = screen.children[1];

//获取焦点的div

var arr = my$("arr");

var index = 0;//记录索引

//1.创建小按钮---根据ul中的li的个数

for (var i = 0; i < list.length; i++) {

var liObj = document.createElement("li")

olObj.appendChild(liObj);

liObj.innerHTML = i + 1;

liObj.setAttribute("index", i);

//注册鼠标进入事件

liObj.onmouseover = function () {

//先移除所有的背景颜色

for (var j = 0; j < olObj.children.length; j++) {

olObj.children[j].removeAttribute("class")

}

//设置当前的li的背景颜色

this.className = "current";

//获取鼠标进入li当前索引值

index = this.getAttribute("index")

//调用动画

animate(ulObj, -index * imgWidth);

}

}

//设置ol中第一个li的背景颜色

olObj.children[0].className = "current";

//克隆ul中的第一个li, 追加到ul的最后面

ulObj.appendChild(ulObj.children[0].cloneNode(true));

//2.自动播放

var timeId = setInterval(move, 1000);

//3.鼠标移入显示焦点左右的div, 并清除定时器

box.onmouseover = function () {

arr.style.display = "block"

clearInterval(timeId)

}

//3.鼠标移出显示焦点左右的div, 并开启定时器

box.onmouseout = function () {

arr.style.display = "none"

timeId = setInterval(move, 1000);

}

//4.点击右边按钮

my$("right").οnclick=move;

//点击左边按钮

my$("left").οnclick=function () {

if (index==0){

index=5;

ulObj.style.left = -index*imgWidth+"px";

}

index--;

animate(ulObj,-index*imgWidth);

for (var i=0;i

olObj.children[i].removeAttribute("class")

}

olObj.children[index].className="current";

}

//封装自动播放的函数

function move() {

if (index == list.length - 1) {

//瞬间跳转到第一张图

ulObj.style.left = 0 + "px"

index = 0;

}

index++;

animate(ulObj, -index * imgWidth);

//判断按钮的背景颜色 , 如果index = 最后一个值的时候, 瞬间设置第一个的按钮的颜色

if (index == list.length - 1) {

//设置第一个li的颜色

olObj.children[0].className = "current";

//清除最后一个按钮的颜色

olObj.children[olObj.children.length-1].className="";

} else {

//更改小按钮的样式

for (var i = 0; i < olObj.children.length; i++) {

olObj.children[i].removeAttribute("class")

}

//设置对应的li的背景颜色

olObj.children[index].className = "current"

}

}