一、html和css部分代碼
設計的框架為：
一個大的div用來顯示圖片（共四張圖片），這個大的div中包含兩個箭頭，用來切換圖片，向左或向右；
然后底部有四個小的div用來對應每張圖片；
html和css效果圖：
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="utf-8"> 5 <title>myImages</title> 6 <style type="text/css"> 7 img{ 8 width: 100%; 9 } 10 11 .li_img{ 12 width: 800px; 13 float: left; 14 list-style: none; 15 } 16 17 .ul_img{ 18 width: 6000px; 19 padding:0px; 20 margin: 0px; 21 transition: all 2s; 22 23 } 24 25 .main_div{ 26 width: 800px; 27 overflow: hidden; 28 position: relative; 29 top: 100px; 30 left: 350px; 31 } 32 33 .arrows{ 34 z-index: 9999; 35 position: absolute; 36 padding-top: 230px; 37 width: 800px; 38 } 39 40 .arrows span{ 41 font-size: 3em; 42 color: seashell; 43 } 44 45 .arrows span:hover { 46 cursor: pointer; 47 background-color: rgba(192, 192, 192, 0.29); 48 } 49 50 .div_btn{ 51 float: left; 52 border-radius: 100px; 53 background-color: aquamarine; 54 width: 60px; 55 height: 10px; 56 margin-left: 10px; 57 margin-top: 130px; 58 } 59 60 .div_btn:hover{ 61 background-color:aqua; 62 63 } 64 </style> 65 </head> 66 <body> 67 <div class = "main_div"> 68 <div class = "arrows"> 69 <span title="1" class="arrow"><</span> 70 <span title="0" class="arrow" style="float: right">></span> 71 </div> 72 73 <ul class="ul_img"> 74 <li class="li_img"><img src="images/1.jpg"></li> 75 <li class="li_img"><img src="images/2.jpg"></li> 76 <li class="li_img"><img src="images/3.jpg"></li> 77 <li class="li_img"><img src="images/4.jpg"></li> 78 </ul> 79 </div> 80 81 <div style="margin-left: 600px"> 82 <div class="div_btn"></div> 83 <div class="div_btn"></div> 84 <div class="div_btn"></div> 85 <div class="div_btn"></div> 86 </div> 87 <script type="text/javascript" src="myscript.js"></script> 88 </body> 89 </html>
JavaScript部分：
輪播的原理：先把圖片排成一行，然后准備一個只有一張圖片大小的容器，對這個容器設置超出部分隱藏，再控制定時器來讓這些圖片整體左移或右移，這樣呈現出來的效果就是圖片在輪播了。
實現的功能：
1、圖片可以自動右向輪播，輪播至最后一張圖片的時候，反向向左輪播，循環反復
2、可以用左右方向鍵去控制圖片輪播方向
3、可以利用下方的圓角矩形來選擇瀏覽某一張圖片
根據實現的功能，具體代碼實現分為三個部分：
1、實現圖片的自動輪播：這里需要設計一個定時器，用到setInterval()方法，每隔一段時間，重復執行一次輪播代碼，當輪播到邊界時，設置數組的下標往反方向輪播即可。
2、給左右箭頭添加事件，實現通過左右箭頭選擇輪播的方向
3、給下方的四個圓角矩形添加事件，實現瀏覽某張特定的圖片
具體代碼：（myscript.js）
1 1 //記錄輪播的次數 2 2 var count = 0; 3 3 //輪播的方向,默認向右 4 4 var isgo = 0; 5 5 //第一計時器對象 6 6 var timer; 7 7 //獲取ul元素 8 8 var ul_img = document.getElementsByClassName("ul_img")[0]; 9 9 //獲取所有li圖片元素 10 10 var li_img = document.getElementsByClassName("li_img"); 11 11 //第一部分，設置定時器 12 12 function showtime(){ 13 13 timer = setInterval(function(){ 14 14 if(isgo==false){ //isgo為false表示向右輪播 15 15 count++; 16 16 if(count>=li_img.length-1){ //如果輪播到右邊界，往反方向輪播 17 17 count = li_img.length-1; 18 18 isgo=true; 19 19 } 20 20 //顯示輪播到的當前圖片，圖片輪播的原理就是把圖片排成一行， 21 21 //然后准備一個只有一張圖片大小的容器，對這個容器設置超出部分隱藏， 22 22 //再控制定時器來讓這些圖片整體左移或右移，這樣呈現出來的效果就是圖片在輪播了 23 23 ul_img.style.transform = "translate("+ -800*count +"px)"; 24 24 }else{ //isgo為true表示向左輪播 25 25 count--; 26 26 if (count<=0) { //如果輪播到左邊界，往反方向輪播 27 27 count = 0; 28 28 isgo=false; 29 29 } 30 30 //顯示輪播到的當前圖片 31 31 ul_img.style.transform = "translate("+ -800*count +"px)"; 32 32 } 33 33 34 34 for (var i = 0; i < div_btn.length; i++) { 35 35 //這里是給下面的圓角矩形設置顏色，當輪播到這張圖片時，顯示為深色，否則顯示為淺色 36 36 div_btn[i].style.backgroundColor = "aquamarine"; 37 37 } 38 38 div_btn[count].style.backgroundColor = "aqua"; 39 39 },4000);//每次延遲4秒鍾 40 40 } 41 41 showtime(); 42 42 43 43 //第二部分，為箭頭添加事件 44 44 //獲取控制方向的箭頭元素 45 45 var arrow = document.getElementsByClassName("arrow"); 46 46 //為箭頭綁定事件 47 47 for(var i=0; i<arrow.length ;i++){ 48 48 //鼠標懸停時 49 49 arrow[i].onmouseover = function(){ 50 50 //停止計時器 51 51 clearInterval(timer); 52 52 } 53 53 //鼠標離開時，開始輪播 54 54 arrow[i].onmouseout = function(){ 55 55 showtime(); 56 56 } 57 57 //鼠標點擊時，輪播一張圖片 58 58 arrow[i].onclick = function(){ 59 59 //區分左右箭頭 60 60 if(this.title==0){ //點擊的是右箭頭時，往右輪播 61 61 count++; 62 62 if(count>3) { 63 63 count = 0; 64 64 } 65 65 }else{ 66 66 count--; 67 67 if(count<0){ 68 68 count=3; 69 69 } 70 70 } 71 71 //顯示輪播到的當前圖片 72 72 ul_img.style.transform="translate("+ -800*count+"px)"; 73 73 for (var i = 0; i < div_btn.length; i++) { 74 74 div_btn[i].style.backgroundColor = "aquamarine"; 75 75 } 76 76 div_btn[count].style.backgroundColor = "aqua"; 77 77 } 78 78 } 79 79 80 80 //第三部分 81 81 //鼠標懸停在底部圓角矩形的操作 82 82 var div_btn = document.getElementsByClassName("div_btn"); 83 83 div_btn[0].style.backgroundColor = "aqua"; //剛開始時，默認在第一張圖，下面的圓角矩形應顯示為深色 84 84 for (var i = 0; i<div_btn.length; i++) { //給每個圓角矩形添加事件 85 85 div_btn[i].index = i; 86 86 div_btn[i].onmouseover = function(){ 87 87 //當鼠標落在某個圓角矩形時 88 88 clearInterval(timer); //停止定時器 89 89 for(var j=0;j<div_btn.length;j++){ //設置矩形的顏色 90 90 div_btn[j].style.backgroundColor="aquamarine"; 91 91 } 92 92 div_btn[this.index].style.backgroundColor="aqua"; 93 93 //控制方向，當鼠標停留在邊界時，需設置輪播的方向，便於 94 94 //鼠標離開重新啟動定時器時，輪播的方向正確 95 95 if (this.index==3) { 96 96 isgo = true; 97 97 } 98 98 if (this.index==0) { 99 99 isgo = false; 100 100 } 101 101 //讓count值對應 102 102 count = this.index; 103 103 ul_img.style.transform = "translate("+ -800*this.index +"px)"; 104 104 } 105 105 div_btn[i].onmouseout = function(){//鼠標離開時 106 106 //重新啟動計時器 107 107 showtime(); 108 108 } 109 109 }
總結：
JavaScript用到的主要知識點：
1、setInterval()和clearInterval()方法，用來控制定時器；
2、鼠標的mouseover、mouseout和click事件；
對我個人而言，主要難點在於對html和css不熟悉。
整體效果圖（一直想弄一個動態圖，沒弄出來，不好意思，只能靜態的截圖了）：
