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 100 01 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";}

總結

以上是生活随笔為你收集整理的用原生JavaScript实现淡入淡出轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。