今天為大家講述的就是JS實現圖片輪播跑馬燈的具體代碼，不說廢話直接看下面：

　　實現原理：

　　1、準備一個展示區域的盒子，設置寬高；

　　2、準備一個存放所有圖片的盒子，將所有圖片依次放入，設置溢出隱藏

　　一、HTML布局　

　<div class="wrapper">
　　<div id="container"><!--圖片展示區域盒子-->
　　<ul id="imglist"><!--將所有圖片并列展示盒子-->
　　<li>
　　<img src="./img/banner.jpg" alt="暫無圖片">
　　</li>
　　<li>
　　<img src="./img/banner0.jpg" alt="暫無圖片">
　　</li>
　　<li>
　　<img src="./img/banner.jpg" alt="暫無圖片">
　　</li>
　　<li>
　　<img src="./img/banner0.jpg" alt="暫無圖片">
　　</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;//設置左右切換標記位防止連續按
　　var time//主要用來設置自動滑動的計時器
　　var index = 0;//記錄每次滑動圖片的下標
　　var Distance = wrap.offsetWidth;//獲取展示區的寬度，即每張圖片的寬度
　　//定義圖片滑動的函數
　　function AutoGo() {
　　var start = inner.offsetLeft;//獲取移動塊當前的left的開始坐標
　　var end = index * Distance * (-1);//獲取移動塊移動結束的坐標。
　　//計算公式即當移動到第三張圖片時，圖片下標為2乘以圖片的寬度就是塊的left值。
　　var change = end - start;//偏移量
　　var timer;//用計時器為圖片添加動畫效果
　　var t = 0;
　　var maxT = 30;
　　clear();//先把按鈕狀態清除,再讓對應按鈕改變狀態
　　if (index == spanList.length) {
　　spanList[0].className = "selected";
　　} else {
　　spanList[index].className = "selected";
　　}
　　clearInterval(timer);//開啟計時器前先把之前的清
　　timer = setInterval(function () {
　　t++;
　　if (t >= maxT) {//當圖片到達終點停止計時器
　　clearInterval(timer);
　　clickFlag = true;//當圖片到達終點才能切換
　　}
　　inner.style.left = change / maxT * t + start + "px";//每個17毫秒讓塊移動
　　if (index == spanList.length && t >= maxT) {
　　inner.style.left = 0;
　　index = 0;
　　//當圖片到最后一張時把它瞬間切換回第一張，由于都同一張圖片不會影響效果
　　}
　　}, 17);
　　}
　　//編寫圖片向右滑動的函數
　　function forward() {
　　index++;
　　//當圖片下標到最后一張把小標換0
　　if (index > spanList.length) {
　　index = 0;
　　}
　　AutoGo();
　　}
　　//編寫圖片向左滑動函數
　　function backward() {
　　index--;
　　//當圖片下標到第一張讓它返回到倒數第二張，
　　//left值要變到最后一張才不影響過渡效果
　　if (index < 0) {
　　index = spanList.length - 1;
　　inner.style.left = (index + 1) * Distance * (-1) + "px";
　　}
　　AutoGo();
　　}
　　//開啟圖片自動向右滑動的計時器
　　time = setInterval(forward, 3000);
　　//設置鼠標懸停動畫停止
　　wrap.onmouseover = function () {
　　clearInterval(time);
　　}
　　wrap.onmouseout = function () {
　　time = setInterval(forward, 3000);
　　}
　　//遍歷每個按鈕讓其切換到對應圖片
　　for (var i = 0; i < spanList.length; i++) {
　　spanList[i].onclick = function () {
　　index = this.innerText - 1;
　　AutoGo();
　　}
　　}
　　//清除頁面所有按鈕狀態顏色
　　function clear() {
　　for (var i = 0; i < spanList.length; i++) {
　　spanList[i].className = "";
　　}
　　}

　　代碼已展示完畢，希望大家好好運用。