1、輪播圖
**輪播圖實現方式：通過定位的方式，改變left的值，形成輪播圖的效果（也可以是從上到下翻滾的，改變top或（bottom））**
需要准備的素材：
1、輪播圖片任意
2、左右移動箭頭
輪播圖的制作方法：
## 第一步創建三個文件
.html文件， .css文件, .js文件
在創建一個img文件夾用來放圖片
我這里的文件名字：輪播圖.html 輪播圖.css 輪播圖.js（文件名最好是英文）
## 第二步：通過html把框架搭好：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="輪播圖.css">
<script src="./輪播圖.js" defer></script>
<style>
.imgdiv ul li img{
/* 圖片大小 */
width: 1024px;
height:420px;
}
</style>
</head>
<body>
<div class="imgdiv" style="width: 1024px; height: 420px;">
<ul style="left: 0;">
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
</ul>
<span class="lf"><img src="./img/左箭頭.png" alt=""></span>
<span class="rf"><img src="./img/右箭頭.png" alt=""></span>
</div>
</body>
</html>注意的點：1、script標簽引外部js時，加上defer（加載完成html后，在加載js），避免獲取不到元素的情況。
2、js獲取外部css樣式修改的時候，也就是沒有在html文件里的樣式，有可能js獲取不到，所以上面代碼中需要改變的left值，還有圖片還有外部盒子的寬度，我都寫在了html里，也方便了如果圖片大小改變時，**只需要修改html文檔就好，css和js代碼都不需要動**
上面代碼運行結果：我這里准備了四張圖片（讀者想用幾張都可以）
、
第三步：寫css樣式
1，寫css把圖片橫向布局，並且通過overflow：hidden的方式把外面的圖片隱藏
2，給ul設置定位，並把left設置為0px;也就是向左偏移為0
（如果是上下輪播，圖片縱向布局，top為0px）
代碼示例：（動畫效果顯示；在父級上ul上加上：transition動畫效果。）
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.imgdiv{
margin: 200px auto 0;
overflow: hidden;
position:relative;
}
.imgdiv ul{
display:flex;
transition: left 1s linear;/*動畫效果*/
position:absolute;
}
.imgdiv span{
cursor:pointer;
}
.imgdiv span.lf{
position: absolute;
left: 10px;
}
.imgdiv span.rf{
position: absolute;
right: 10px;
}
.imgdiv>div{
margin: 0 auto;
position: absolute;
left:0;
bottom:20px;
display: flex;
}
.newsdiv{
width: 0;
height: 0;
border: 10px solid rgb(139, 138, 138);
border-radius: 50%;
margin:0 20px;
cursor:pointer;
opacity: 0.3;
}上述代碼中的下面這兩段代碼：是給下面放小圓點盒子與小圓點樣式的。在js中根據圖片個數動態創建小圓點
.imgdiv>div{
margin: 0 auto;
position: absolute;
left:0;
bottom:20px;
display: flex;
}
.newsdiv{
width: 0;
height: 0;
border: 10px solid rgb(139, 138, 138);
border-radius: 50%;/*正方形變成圓形*/
margin:0 20px;
cursor:pointer;/*鼠標放上去變成小手*/
opacity: 0.3;/*初始透明度，通過js修改透明度，來修改其高亮*/
}效果如圖：
第四步;通過寫js來改變圖片的left值，使其動態顯示。
js：
1、使左右兩個圖片居中，根據圖片的高度，（圖片高度-箭頭高度）/2
// 設置左右按鈕居中
lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
2、根據圖片個數，創建小圓點的個數
// 跟隨圖片的個數,動態設置圓點的個數
newsbigdiv=document.createElement('div');
newsbigdiv.className='newsbigdiv';
pop.appendChild(newsbigdiv);
// 循環創建子div,給每個子div一個class樣式,加一個索引
for(var i=0;i<lengthLi;i++){
newsdiv=document.createElement('div');
newsbigdiv.appendChild(newsdiv);
newsdiv.className="newsdiv";
newsdiv.setAttribute('index',i);//給每個子div設置一個索引值
}
// 獲取圓點div個數,讓其左偏移,居中顯示
var divsv = newsbigdiv.querySelectorAll('div');
newsbigdiv.style.left=(content_width-divsv.length*60)/2+'px';
// 默認第一個為高亮
divsv[0].style.opacity=1;3、改變left值使圖片位置發生變換
做法：
num為0 的時候left為0（第一張圖） num為1的時候left為負的圖片寬度（第二張圖） num為2的時候left為負的2倍圖片寬度（第三張圖）
// 設置全局累加器，判斷動到哪一張圖片**************
var num=0;
具體代碼：（因為是向左移動，所以left為負值（負號別忘了加）根據num的值的變化，來改變圖片的left值）
function change(){
// 把所有圓點樣式透明設置為0.3
for(var j=0;j<lengthLi;j++){
divsv[j].style.opacity=0.3;
}
// 給當前索引為num的圖片改變圓點高亮顯示
divsv[num].style.opacity=1;
indexUl.style.left=-num*content_width+'px';
}4、給兩個箭頭綁定點擊事件
lfspan.onclick=function(){
num--;
if(num==-1){
num=lengthLi-1;
}
change();
}
rfspan.onclick=function(){
num++;
if(num==lengthLi){
num=0;
}
change();
}5、給下面的圓點綁定點擊事件
for(var i=0;i<lengthLi;i++){
divsv[i].onclick=function(){
num=this.getAttribute('index');
change();
}
}6、設置計時器（第一個參數為，右點擊函數，第二個參數為幾秒執行一次）
timer=setInterval(rfspan.onclick,TIME);7、鼠標移入移出事件（移入圖片計時器停止輪播結束，移出圖片計時器開始輪播繼續）
// 當鼠標放在圖片上時,清除定時器
pop.onmouseover=function(){
clearInterval(timer);
}
// 鼠標離開定時器時,開啟定時器
pop.onmouseout=function(){
timer=setInterval(rfspan.onclick,TIME);
}js詳細代碼：
var indexUl = document.querySelector(".imgdiv>ul");
// li標簽
var indexLi=indexUl.querySelectorAll("li");
var lengthLi =indexLi.length;
// 最大的div
var pop = document.querySelector(".imgdiv");
var lfspan=pop.querySelector('.lf');
var rfspan=pop.querySelector('.rf');
// 設置左右按鈕居中
lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
// 初始化,獲得顯示框的寬度
var content_width=parseInt(pop.offsetWidth);
const TIME=2000;
var timer;
// 設置全局累加器，判斷動到哪一張圖片**************
var num=0;
// 跟隨圖片的個數,動態設置圓點的個數
newsbigdiv=document.createElement('div');
newsbigdiv.className='newsbigdiv';
pop.appendChild(newsbigdiv);
// 循環創建子div,給每個子div一個class樣式,加一個索引
for(var i=0;i<lengthLi;i++){
newsdiv=document.createElement('div');
newsbigdiv.appendChild(newsdiv);
newsdiv.className="newsdiv";
newsdiv.setAttribute('index',i);//給每個子div設置一個索引值
}
// 獲取圓點div個數,讓其左偏移,居中顯示
var divsv = newsbigdiv.querySelectorAll('div');
newsbigdiv.style.left=(content_width-divsv.length*60)/2+'px';
// 默認第一個為高亮
divsv[0].style.opacity=1;
function change(){
// 把所有圓點樣式透明設置為0.3
for(var j=0;j<lengthLi;j++){
divsv[j].style.opacity=0.3;
}
// 給當前索引為num的圖片改變圓點高亮顯示
divsv[num].style.opacity=1;
indexUl.style.left=-num*content_width+'px';
}
for(var i=0;i<lengthLi;i++){
divsv[i].onclick=function(){
num=this.getAttribute('index');
change();
}
}
lfspan.onclick=function(){
num--;
if(num==-1){
num=lengthLi-1;
}
change();
}
rfspan.onclick=function(){
num++;
if(num==lengthLi){
num=0;
}
change();
}
timer=setInterval(rfspan.onclick,TIME);
// 當鼠標放在圖片上時,清除定時器
pop.onmouseover=function(){
clearInterval(timer);
}
// 鼠標離開定時器時,開啟定時器
pop.onmouseout=function(){
timer=setInterval(rfspan.onclick,TIME);
}。。。。。。。。。。。。輪播圖完成。。。。。。。。。。。
待優化：不能從最后一張直接動畫成第一張，第一張不能直接動畫成最后一張
具體實現
比如四張圖片輪播，在第一張圖片的前面有第四張圖片，在第四張圖片的后面有第一張圖片
用數字表示 4（1 2 3 4）1
