?* {
?? ??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;
}

<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>

// 元素對象
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; //切換一張圖片耗費的時間
var steps = 50; //步數(shù)
var interval = 10; //定時任務的時間間隔
var current_red = 0;
// isMoving變量用于判斷當前是否正在切圖中
var isMoving = false;
// 自動輪播定時任務的id值
var autoId;

?? ??? ??? ?// 鼠標移入時顯示左右箭頭，移出時隱藏左右箭頭
?? ??? ??? ?box.addEventListener("mouseenter", function (e) {
?? ??? ??? ??? ?left.style.opacity = 1;
?? ??? ??? ??? ?right.style.opacity = 1;
?? ??? ??? ??? ?// 鼠標移入到box時停止輪播
?? ??? ??? ??? ?clearInterval(autoId);
?? ??? ??? ?});
?? ??? ??? ?box.addEventListener("mouseleave", function (e) {
?? ??? ??? ??? ?left.style.opacity = 0;
?? ??? ??? ??? ?right.style.opacity = 0;
?? ??? ??? ??? ?// 鼠標移出box時開啟自動輪播
?? ??? ??? ??? ?autoMove();
?? ??? ??? ?});
?? ??? ??? ?// 對左右箭頭設置點擊事件
?? ??? ??? ?function move(e, direction) {
?? ??? ??? ??? ?// isMoving為true時表示正在切換圖片，不能再執(zhí)行move函數(shù)的代碼
?? ??? ??? ??? ?if (isMoving) {
?? ??? ??? ??? ??? ?return;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?isMoving = true;
?? ??? ??? ??? ?// 獲取當前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 {
?? ??? ??? ??? ??? ?// 通過點擊的箭頭確定圖片移動的距離
?? ??? ??? ??? ??? ?var delta_x = direction === "left" ? imgWidth : -imgWidth;
?? ??? ??? ??? ??? ?// 計算要移動到的位置
?? ??? ??? ??? ??? ?end_x = start_x + delta_x;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?// 計算每一步移動的距離
?? ??? ??? ??? ?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";
?? ??? ??? ??? ??? ?// 條件成立表示完成了此次圖片的切換，清除定時器
?? ??? ??? ??? ??? ?if (current_x === end_x) {
?? ??? ??? ??? ??? ??? ?// current_x等于0表示此時顯示的是位置上的第一張圖片(第一個li)，我們要切換到倒數(shù)第二張去。
?? ??? ??? ??? ??? ??? ?if (current_x === 0) {
?? ??? ??? ??? ??? ??? ??? ?imglist.style.left = -2500 + "px";
?? ??? ??? ??? ??? ??? ??? ?// current_x等于-3000表示此時顯示的是位置上的最后一張(第七個li),我們要切換到第二張圖片去。
?? ??? ??? ??? ??? ??? ?} else if (current_x === -3000) {
?? ??? ??? ??? ??? ??? ??? ?imglist.style.left = -500 + "px";
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?clearInterval(next_inter_id);
?? ??? ??? ??? ??? ??? ?// 圖片切換完成時切換小圓點,傳入的參數(shù)是此時imglist的left屬性的值
?? ??? ??? ??? ??? ??? ?changeDots(current_x);
?? ??? ??? ??? ??? ??? ?// 圖片切換完成，可以繼續(xù)點擊箭頭或小圓點切圖了
?? ??? ??? ??? ??? ??? ?isMoving = false;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}, interval);
?? ??? ??? ?}
?? ??? ??? ?right.addEventListener("click", function (e) {
?? ??? ??? ??? ?move(e, "right");
?? ??? ??? ?});
?? ??? ??? ?left.addEventListener("click", function (e) {
?? ??? ??? ??? ?move(e, "left");
?? ??? ??? ?});

?? ??? ??? ?/*?
?? ??? ??? ??? ?無限循環(huán)的實現(xiàn)思路：在首尾各添加一張圖片，首部添加第五張圖片，尾部添加第一張圖片
?? ??? ??? ??? ?1、改變imglist的寬度
?? ??? ??? ??? ?2、改變imglist元素中l(wèi)eft的值
?? ??? ??? ??? ?3、在添加兩張圖片后，輪播到第一張和最后一張時實現(xià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);
?? ??? ??? ??? ?// 把上一個小圓點紅色背景清除
?? ??? ??? ??? ?dots[current_red].className = "";
?? ??? ??? ??? ?// 把當前切換到的圖片對應的小圓點添加紅色背景
?? ??? ??? ??? ?dots[index].className = "current";
?? ??? ??? ??? ?// 將當前紅色背景的小圓點的索引賦值給current_red變量
?? ??? ??? ??? ?current_red = index;
?? ??? ??? ?}

?? ??? ??? ?// 小圓點的點擊事件
?? ??? ??? ?for (var i = 0; i < dots.length; i++) {
?? ??? ??? ??? ?dots[i].setAttribute("data-index", i);
?? ??? ??? ??? ?dots[i].onclick = function (e) {
?? ??? ??? ??? ??? ?var index = this.dataset.index;
?? ??? ??? ??? ??? ?// 計算圖片要切換到的目標位置
?? ??? ??? ??? ??? ?var target_pos = -imgWidth * (Number(index) + 1);
?? ??? ??? ??? ??? ?// 利用現(xiàn)有的move函數(shù)完成點擊小圓點圖片的切換
?? ??? ??? ??? ??? ?move(e, target_pos);
?? ??? ??? ??? ?};
?? ??? ??? ?}

?? ??? ??? ?// 實現(xiàn)自動輪播
?? ??? ??? ?function autoMove() {
?? ??? ??? ??? ?autoId = setInterval(function () {
?? ??? ??? ??? ??? ?move("right");
?? ??? ??? ??? ?}, 3000);
?? ??? ??}
autoMove();