這篇文章簡(jiǎn)而言之就是說(shuō)用javascript實(shí)現(xiàn)圖片輪播簡(jiǎn)單效果的具體代碼，直接放代碼：

　　這里是css樣式

　　* {
　　margin: 0;
　　padding: 0;
　　}
　　ul,
　　li {
　　list-style: none;
　　}
　　img {
　　display: block;
　　/*vertical-align: middle;*/
　　}
　　a {
　　text-decoration: none;
　　}
　　input {
　　outline: none;
　　}
　　.clearFix:after {
　　content: "";
　　display: table;
　　clear: both;
　　}
　　#box {
　　position: relative;
　　width: 500px;
　　height: 300px;
　　margin: 50px auto;
　　overflow: hidden;
　　}
　　#box .imglist {
　　position: absolute;
　　left: -500px;
　　top: 0;
　　width: 3500px;
　　height: 300px;
　　}
　　#box .imglist li {
　　float: left;
　　width: 500px;
　　height: 300px;
　　}
　　#box .imglist li img {
　　width: 500px;
　　height: 300px;
　　}
　　#box span {
　　position: absolute;
　　top: 50%;
　　transform: translateY(-50%);
　　width: 25px;
　　height: 50px;
　　background-color: rgba(200, 200, 200, 0.7);
　　font-size: 20px;
　　text-align: center;
　　line-height: 50px;
　　color: white;
　　opacity: 0;
　　transition: opacity 1s;
　　}
　　#box .left {
　　left: 0;
　　}
　　#box .right {
　　right: 0;
　　}
　　#box .btnlist {
　　position: absolute;
　　left: 50%;
　　transform: translateX(-50%);
　　bottom: 10px;
　　overflow: hidden;
　　}
　　#box .btnlist li {
　　float: left;
　　width: 10px;
　　height: 10px;
　　margin-right: 10px;
　　border-radius: 50%;
　　background-color: gray;
　　}
　　#box .btnlist li.current {
　　background-color: red;
　　}

　　這里是body里的div，圖片都是寬500px的，這個(gè)是我設(shè)計(jì)的，你也可以按照自己的尺寸來(lái)

　　<div id="box">
　　<ul class="imglist">
　　<li><img src="images/yaya5.jpg" /></li>
　　<li><img src="images/yaya1.jpg" /></li>
　　<li><img src="images/yaya2.jpg" /></li>
　　<li><img src="images/yaya3.jpg" /></li>
　　<li><img src="images/yaya4.jpg" /></li>
　　<li><img src="images/yaya5.jpg" /></li>
　　<li><img src="images/yaya1.jpg" /></li>
　　</ul>
　　<span class="left"> < </span>
　　<span class="right"> > </span>
　　<ul class="btnlist">
　　<li class="current"></li>
　　<li></li>
　　<li></li>
　　<li></li>
　　<li></li>
　　</ul>
　　</div>

　　這里是js代碼,代碼大部分地方都做了注釋

　　// 元素對(duì)象
　　var left = document.querySelector(".left");
　　var right = document.querySelector(".right");
　　var imglist = document.querySelector(".imglist");
　　var box = document.querySelector("#box");
　　var dots = document.querySelectorAll(".btnlist li");
　　// 變量區(qū)
　　var imgWidth = 500; //圖片的寬度
　　var time = 500; //切換一張圖片耗費(fèi)的時(shí)間
　　var steps = 50; //步數(shù)
　　var interval = 10; //定時(shí)任務(wù)的時(shí)間間隔
　　var current_red = 0;
　　// isMoving變量用于判斷當(dāng)前是否正在切圖中
　　var isMoving = false;
　　// 自動(dòng)輪播定時(shí)任務(wù)的id值
　　var autoId;
　　// 鼠標(biāo)移入時(shí)顯示左右箭頭，移出時(shí)隱藏左右箭頭
　　box.addEventListener("mouseenter", function (e) {
　　left.style.opacity = 1;
　　right.style.opacity = 1;
　　// 鼠標(biāo)移入到box時(shí)停止輪播
　　clearInterval(autoId);
　　});
　　box.addEventListener("mouseleave", function (e) {
　　left.style.opacity = 0;
　　right.style.opacity = 0;
　　// 鼠標(biāo)移出box時(shí)開(kāi)啟自動(dòng)輪播
　　autoMove();
　　});
　　// 對(duì)左右箭頭設(shè)置點(diǎn)擊事件
　　function move(e, direction) {
　　// isMoving為true時(shí)表示正在切換圖片，不能再執(zhí)行move函數(shù)的代碼
　　if (isMoving) {
　　return;
　　}
　　isMoving = true;
　　// 獲取當(dāng)前imglist的位置
　　var start_x = imglist.offsetLeft;
　　var end_x;
　　// 判斷direction的數(shù)據(jù)類型
　　if (typeof direction === "number") {
　　end_x = direction;
　　var delta_x = end_x - start_x;
　　} else {
　　// 通過(guò)點(diǎn)擊的箭頭確定圖片移動(dòng)的距離
　　var delta_x = direction === "left" ? imgWidth : -imgWidth;
　　// 計(jì)算要移動(dòng)到的位置
　　end_x = start_x + delta_x;
　　}
　　// 計(jì)算每一步移動(dòng)的距離
　　var step_dis = delta_x / steps;
　　var next_inter_id = setInterval(function () {
　　var current_x = imglist.offsetLeft;
　　current_x += step_dis;
　　imglist.style.left = current_x + "px";
　　// 條件成立表示完成了此次圖片的切換，清除定時(shí)器
　　if (current_x === end_x) {
　　// current_x等于0表示此時(shí)顯示的是位置上的第一張圖片(第一個(gè)li)，我們要切換到倒數(shù)第二張去。
　　if (current_x === 0) {
　　imglist.style.left = -2500 + "px";
　　// current_x等于-3000表示此時(shí)顯示的是位置上的最后一張(第七個(gè)li),我們要切換到第二張圖片去。
　　} else if (current_x === -3000) {
　　imglist.style.left = -500 + "px";
　　}
　　clearInterval(next_inter_id);
　　// 圖片切換完成時(shí)切換小圓點(diǎn),傳入的參數(shù)是此時(shí)imglist的left屬性的值
　　changeDots(current_x);
　　// 圖片切換完成，可以繼續(xù)點(diǎn)擊箭頭或小圓點(diǎn)切圖了
　　isMoving = false;
　　}
　　}, interval);
　　}
　　right.addEventListener("click", function (e) {
　　move(e, "right");
　　});
　　left.addEventListener("click", function (e) {
　　move(e, "left");
　　});
　　/*
　　無(wú)限循環(huán)的實(shí)現(xiàn)思路：在首尾各添加一張圖片，首部添加第五張圖片，尾部添加第一張圖片
　　1、改變imglist的寬度
　　2、改變imglist元素中l(wèi)eft的值
　　3、在添加兩張圖片后，輪播到第一張和最后一張時(shí)實(shí)現(xiàn)切換。
　　*/
　　// 小圓點(diǎn)的切換
　　function changeDots(current_x) {
　　/*
　　current_x可能的取值：0 -500 -1000 -1500 -2000 -2500 -3000
　　除以-500： 0 1 2 3 4 5 6
　　整體減去1： -1 0 1 2 3 4 5
　　*/
　　var index = current_x / -500 - 1;
　　index = index === -1 ? 4 : index === 5 ? 0 : index;
　　// console.log(index);
　　// 把上一個(gè)小圓點(diǎn)紅色背景清除
　　dots[current_red].className = "";
　　// 把當(dāng)前切換到的圖片對(duì)應(yīng)的小圓點(diǎn)添加紅色背景
　　dots[index].className = "current";
　　// 將當(dāng)前紅色背景的小圓點(diǎn)的索引賦值給current_red變量
　　current_red = index;
　　}
　　// 小圓點(diǎn)的點(diǎn)擊事件
　　for (var i = 0; i < dots.length; i++) {
　　dots[i].setAttribute("data-index", i);
　　dots[i].onclick = function (e) {
　　var index = this.dataset.index;
　　// 計(jì)算圖片要切換到的目標(biāo)位置
　　var target_pos = -imgWidth * (Number(index) + 1);
　　// 利用現(xiàn)有的move函數(shù)完成點(diǎn)擊小圓點(diǎn)圖片的切換
　　move(e, target_pos);
　　};
　　}
　　// 實(shí)現(xiàn)自動(dòng)輪播
　　function autoMove() {
　　autoId = setInterval(function () {
　　move("right");
　　}, 3000);
　　}
　　autoMove();