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 aBtn = document.getElementById("btn").getElementsByTagName("a");var dir = document.getElementById("direction").getElementsByTagName("a");var iNow = 0;var timer = null;//首先復制一張圖片放在ul的最后面var li = aLi[0].cloneNode(true);ul.appendChild(li);//算ul的寬度ul.style.width = aLi.length * iw + '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-2iNow = aLi.length - 2;//為了不出現回啦的感覺 我們讓ul的left值為 length-1*iw的寬度ul.style.left = -(aLi.length - 1) * iw + 'px';} else {iNow--;}toImg();};//點擊右邊的按鈕的時候dir[1].onclick = function () {if (iNow == aLi.length - 1) {//因為下一次顯示要從下標為1的開始iNow = 1;//為了不出現回啦的那種感覺 我們瞬間讓ul的left值為0ul.style.left = 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 == aLi.length - 1) {//因為下一次顯示要從下標為1的開始iNow = 1;//為了不出現回啦的那種感覺 我們瞬間讓ul的left值為0ul.style.left = 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 == aLi.length - 1 ? 0 : iNow].className = "active";}

總結

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

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