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="##"><i class="iconfont icon-xiangzuo"></i></a><a href="##"><i class="iconfont icon-xiangyou"></i></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;}#banner > ul > li {position: absolute;opacity: 0;filter: alpha(opacity:0);}#banner > ul > li:nth-child(1) {opacity: 1;filter: alpha(opacity:100);}#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: 60px;color: #fff;text-decoration: none;background: rgba(0, 0, 0, .5);/*font-size: 40px;*/top: 170px;opacity: 0.5;border-radius: 50%;}#direction > a > i {font-size: 25px;}#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)}
/*1、分析布局：定位布局li的透明度不断变化2、分析逻辑var iNow：隐藏 Next:显示6个li0 1 2 3 4 5下标透明度其他0 10001 100 下标为0的li变成了02 100 下标为1的li变成03 100 下标为2的li变成0var iNow =0 Next = 0;li[next] = 显示0iNOW = nextli[inow] = 隐藏Next++li[next] = 显示1inow = next;li[iNow] = 隐藏Next++li[next] = 显示2*/var banner = document.getElementById("banner");var direction = document.getElementById("direction");var aLi = document.querySelectorAll("#banner>ul>li");var dir = document.querySelectorAll("#direction>a");var aBtn = document.querySelectorAll("#btn>a");var iNow = 0, Next = 0;var timer = null;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 = "";move(aLi[j], {opacity: 0});}this.className = "active";//移入的时候让当前这个li显示move(aLi[this.index], {opacity: 100});//因为next与this.index不是同一个东西 因此需要他们两个同步Next = this.index;iNow = Next;}}//点击左边的按钮dir[0].onclick = function () {if (Next == 0) {Next = aLi.length - 1;} else {Next--;}toImg();};//点击右边的按钮dir[1].onclick = function () {if (Next == aLi.length - 1) {Next = 0;} else {Next++;}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 (Next == aLi.length - 1) {Next = 0;} else {Next++;}toImg()}, 2000)}//运动原理function toImg() {move(aLi[iNow], {opacity: 0});move(aLi[Next], {opacity: 100});iNow = Next;for (var i = 0; i < aBtn.length; i++) {aBtn[i].className = "";}aBtn[Next].className = "active";}
