html代码
<div id="banner">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<div id="direction">
<a href="##"><</a>
<a href="##">></a>
</div>
<div id="btn">
<a href="##" class="active"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</div>
css代码
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#banner {
width: 800px;
height: 400px;
margin: 40px auto;
position: relative;
overflow: hidden;
}
#banner > ul {
position: absolute;
}
#banner > ul > li {
float: left;
width: 800px;
height: 400px;
}
#banner > ul > li > img {
width: 800px;
height: 400px;
}
#direction {
position: relative;
display: none;
}
#direction > a {
position: absolute;
width: 60px;
height: 60px;
text-align: center;
line-height: 55px;
color: #fff;
text-decoration: none;
background: rgba(0, 0, 0, .5);
font-size: 40px;
top: 170px;
opacity: 0.5;
border-radius: 50%;
}
#direction > a:nth-child(2) {
right: 0;
}
#btn {
position: absolute;
bottom: 0;
left: 340px;
}
#btn > a {
float: left;
margin-left: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f40;
}
#btn > .active {
background: #fff;
}
JS代码
封装运动框架
// 完美运动框架
function move(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bStop = true;
for (var attr in json) {
//先判断是否是透明度
var iCur;
if (attr == "opacity") {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
//算速度
var speed = (json[attr] - iCur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (json[attr] != iCur) {
bStop = false;
}
if (attr == "opacity") {
obj.style.opacity = (iCur + speed) / 100;
obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")"
} else {
obj.style[attr] = iCur + speed + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
fn && fn();
}
}, 30)
}
var ul = document.getElementById("banner").getElementsByTagName("ul")[0];
var aLi = ul.getElementsByTagName("li");
var iw = aLi[0].offsetWidth;
var len = aLi.length;
var aBtn = document.getElementById("btn").getElementsByTagName("a");
var dir = document.getElementById("direction").getElementsByTagName("a");
var iNow = 0;
var timer = null;
//算ul的宽度
ul.style.width = iw * len + 'px';
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onmouseover = function () {
for (var j = 0; j < aBtn.length; j++) {
aBtn[j].className = "";
}
this.className = "active";
move(ul, {left: -(this.index) * iw});
iNow = this.index;
}
}
//点击左边的按钮的时候
dir[0].onclick = function () {
if (iNow == 0) {
//当iNow为0的时候下次出现的图片应该是length-1
iNow = len - 1;
} else {
iNow--;
}
toImg();
};
//点击右边的按钮的时候
dir[1].onclick = function () {
if (iNow == len - 1) {
//因为下一次显示要从下标为0的开始
iNow = 0;
} else {
iNow++;
}
toImg()
};
//移入的时候变亮
dir[0].onmouseover = function () {
this.style.opacity = "1";
};
dir[1].onmouseover = function () {
this.style.opacity = "1";
};
//移出的时候变暗
dir[0].onmouseout = function () {
this.style.opacity = "0.5";
};
dir[1].onmouseout = function () {
this.style.opacity = "0.5";
};
//移入的时候轮播停止
banner.onmouseover = function () {
clearInterval(timer);
direction.style.display = "block";
};
//移出的时候轮播继续
banner.onmouseout = function () {
autoPlay();
direction.style.display = "none";
};
//自动轮播
autoPlay();
function autoPlay() {
timer = setInterval(function () {
if (iNow == len - 1) {
iNow = 0;
} else {
iNow++
}
toImg();
}, 2000)
}
//运动原理
function toImg() {
move(ul, {left: -iNow * iw});
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className = "";
}
aBtn[iNow].className = "active";
}