今天為大家講述的就是JS實(shí)現(xiàn)圖片輪播跑馬燈的具體代碼，不說(shuō)廢話直接看下面：

　　實(shí)現(xiàn)原理：

　　1、準(zhǔn)備一個(gè)展示區(qū)域的盒子，設(shè)置寬高；

　　2、準(zhǔn)備一個(gè)存放所有圖片的盒子，將所有圖片依次放入，設(shè)置溢出隱藏

　　一、HTML布局　

　<div class="wrapper">
　　<div id="container"><!--圖片展示區(qū)域盒子-->
　　<ul id="imglist"><!--將所有圖片并列展示盒子-->
　　<li>
　　<img src="./img/banner.jpg" alt="暫無(wú)圖片">
　　</li>
　　<li>
　　<img src="./img/banner0.jpg" alt="暫無(wú)圖片">
　　</li>
　　<li>
　　<img src="./img/banner.jpg" alt="暫無(wú)圖片">
　　</li>
　　<li>
　　<img src="./img/banner0.jpg" alt="暫無(wú)圖片">
　　</li>
　　</ul>
　　<ul id="point">
　　<li class="selected"></li>
　　<li></li>
　　<li></li>
　　<li></li>
　　</ul>
　　</div>
　　</div>

　　二、CSS樣式

　.wrapper{
　　position: relative;
　　overflow: hidden;
　　width: 100%;
　　height: 870px;
　　}
　　#container{
　　width: 1920px;
　　height: 870px;
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　overflow: hidden;
　　transform: translate(-50%,-50%);
　　-webkit-transform: translate(-50%,-50%);
　　-moz-transform: translate(-50%,-50%);
　　-ms-transform: translate(-50%,-50%);
　　-o-transform: translate(-50%,-50%);
　　background-color: #aa201c;
　　}
　　#imglist{
　　width: 7680px;
　　height: 870px;
　　list-style-type: none;
　　position: absolute;
　　top: 0;
　　left: 0;
　　z-index: 1;
　　}
　　#imglist>li{
　　width: 1920px;
　　height: 870px;
　　float: left;
　　overflow: hidden;
　　}
　　#point{
　　list-style-type: none;
　　position: absolute;
　　bottom: 5px;
　　left: 50%;
　　/* right: 0; */
　　/* margin: auto; */
　　width: 100%;
　　height: 29px;
　　line-height: 29px;
　　z-index: 10;
　　}
　　#point>.selected{
　　background-color: #aa201c;
　　}
　　#point>li{
　　width: 16px;
　　height: 16px;
　　float: left;
　　background-color: #c5c8ce;
　　border-radius: 100%;
　　margin-right: 10px;
　　-webkit-border-radius: 100%;
　　}

　　三、JS代碼

　　var wrap = document.getElementById("container");
　　var inner = document.getElementById("imglist");
　　var spanList = document.getElementById("point").getElementsByTagName("li");
　　var left = document.getElementById("left");
　　var right = document.getElementById("right");
　　var clickFlag = true;//設(shè)置左右切換標(biāo)記位防止連續(xù)按
　　var time//主要用來(lái)設(shè)置自動(dòng)滑動(dòng)的計(jì)時(shí)器
　　var index = 0;//記錄每次滑動(dòng)圖片的下標(biāo)
　　var Distance = wrap.offsetWidth;//獲取展示區(qū)的寬度，即每張圖片的寬度
　　//定義圖片滑動(dòng)的函數(shù)
　　function AutoGo() {
　　var start = inner.offsetLeft;//獲取移動(dòng)塊當(dāng)前的left的開始坐標(biāo)
　　var end = index * Distance * (-1);//獲取移動(dòng)塊移動(dòng)結(jié)束的坐標(biāo)。
　　//計(jì)算公式即當(dāng)移動(dòng)到第三張圖片時(shí)，圖片下標(biāo)為2乘以圖片的寬度就是塊的left值。
　　var change = end - start;//偏移量
　　var timer;//用計(jì)時(shí)器為圖片添加動(dòng)畫效果
　　var t = 0;
　　var maxT = 30;
　　clear();//先把按鈕狀態(tài)清除,再讓對(duì)應(yīng)按鈕改變狀態(tài)
　　if (index == spanList.length) {
　　spanList[0].className = "selected";
　　} else {
　　spanList[index].className = "selected";
　　}
　　clearInterval(timer);//開啟計(jì)時(shí)器前先把之前的清
　　timer = setInterval(function () {
　　t++;
　　if (t >= maxT) {//當(dāng)圖片到達(dá)終點(diǎn)停止計(jì)時(shí)器
　　clearInterval(timer);
　　clickFlag = true;//當(dāng)圖片到達(dá)終點(diǎn)才能切換
　　}
　　inner.style.left = change / maxT * t + start + "px";//每個(gè)17毫秒讓塊移動(dòng)
　　if (index == spanList.length && t >= maxT) {
　　inner.style.left = 0;
　　index = 0;
　　//當(dāng)圖片到最后一張時(shí)把它瞬間切換回第一張，由于都同一張圖片不會(huì)影響效果
　　}
　　}, 17);
　　}
　　//編寫圖片向右滑動(dòng)的函數(shù)
　　function forward() {
　　index++;
　　//當(dāng)圖片下標(biāo)到最后一張把小標(biāo)換0
　　if (index > spanList.length) {
　　index = 0;
　　}
　　AutoGo();
　　}
　　//編寫圖片向左滑動(dòng)函數(shù)
　　function backward() {
　　index--;
　　//當(dāng)圖片下標(biāo)到第一張讓它返回到倒數(shù)第二張，
　　//left值要變到最后一張才不影響過(guò)渡效果
　　if (index < 0) {
　　index = spanList.length - 1;
　　inner.style.left = (index + 1) * Distance * (-1) + "px";
　　}
　　AutoGo();
　　}
　　//開啟圖片自動(dòng)向右滑動(dòng)的計(jì)時(shí)器
　　time = setInterval(forward, 3000);
　　//設(shè)置鼠標(biāo)懸停動(dòng)畫停止
　　wrap.onmouseover = function () {
　　clearInterval(time);
　　}
　　wrap.onmouseout = function () {
　　time = setInterval(forward, 3000);
　　}
　　//遍歷每個(gè)按鈕讓其切換到對(duì)應(yīng)圖片
　　for (var i = 0; i < spanList.length; i++) {
　　spanList[i].onclick = function () {
　　index = this.innerText - 1;
　　AutoGo();
　　}
　　}
　　//清除頁(yè)面所有按鈕狀態(tài)顏色
　　function clear() {
　　for (var i = 0; i < spanList.length; i++) {
　　spanList[i].className = "";
　　}
　　}

　　代碼已展示完畢，希望大家好好運(yùn)用。