自己寫的代碼，供參考
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style>
? *{margin:0;
? ? padding:0;
? ? list-style:none;}
? .wrap{height:170px;
? ? ? ? width:490px;
? ? ? ? margin:60px auto;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? ? ? margin:100px auto;}
? .wrap ul{position:absolute;}?
? .wrap ul li{height:170px;}
? .wrap ol{position:absolute;
? ? ? ? ? ?right:5px;
? ? ? ? ? ?bottom:10px;}
? .wrap ol li{height:20px; width: 20px;
? ? ? ? ? ? ? background:#ccc;
? ? ? ? ? ? ? border:solid 1px #666;
? ? ? ? ? ? ? margin-left:5px;
? ? ? ? ? ? ? color:#000;
? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? line-height:center;
? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? cursor:pointer;}
? .wrap ol .on{background:#E97305;
? ? ? ? ? ? ? ?color:#fff;}
? </style>
? <script type="text/javascript">
? window.onload=function(){
? ? var wrap=document.getElementById('wrap'),
? ? ? ? pic=document.getElementById('pic'),
? ? ? ? imgs=pic.getElementsByTagName('li'),
? ? ? ? list=document.getElementById('list').getElementsByTagName('li'),
? ? ? ? index=0,
? ? ? ? timer=null;
? ? ? ??
? ? if(imgs.length !== list.length) return;
? ??
? ? for(var i=0;i<list.length;i++){
? ? ? ? list[i].id=i;
? ? ? ? list[i].onmouseover=function(){
? ? ? ? chang(this.id);
? ? ? ? }
? ? }
? ??
? ? function auto(){
? ? ? ? timer=setInterval(function(){
? ? ? ? index++;
? ? ? ? if(index>=list.length){
? ? ? ? ? ? index=0;
? ? ? ? }
? ? ? ? chang(index);
? ? },2000);
? ? }
? ? auto();
? ??
? ? function chang(curindex){
? ? ? ? for(var j=0;j<list.length;j++){
? ? ? ? ? ? list[j].className='';
? ? ? ? ? ? imgs[j].style.display='none';
? ? ? ? }
? ? ? ? list[curindex].className='on';
? ? ? ? imgs[curindex].style.display='block';
? ? ? ? index = curindex;
? ? }
? ? wrap.onmouseover=function(){
? ? ? ? clearInterval(timer);
? ? ? ? timer=null;
? ? }
? ??
? ? wrap.onmouseout=function(){
? ? ? ? ?auto();?
? ? }
? ?}
? </script>
</head>
<body>
? <div class="wrap" id='wrap'>
? ? <ul id="pic">
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li>? ??
? ? </ul>
? ? <ol id="list">
? ? ? <li class="on">1</li>
? ? ? <li>2</li>
? ? ? <li>3</li>
? ? ? <li>4</li>
? ? ? <li>5</li>
? ? </ol>
? </div>
</body>
</html>
2020-10-14
<!doctype?html>
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<title>Document</title>
??<style>
????*?{
??????margin:?0;
??????padding:?0;
??????list-style:?none;
????}
????.wrap?{
??????height:?170px;
??????width:?490px;
??????margin:?60px?auto;
??????overflow:?hidden;
??????position:?relative;
??????margin:?100px?auto;
????}
????.wrap?ul?{
??????position:?absolute;
????}
????.wrap?ul?li?{
??????height:?170px;
????}
????.wrap?ol?{
??????position:?absolute;
??????right:?5px;
??????bottom:?10px;
????}
????.wrap?ol?li?{
??????height:?20px;
??????width:?20px;
??????background:?#ccc;
??????border:?solid?1px?#666;
??????margin-left:?5px;
??????color:?#000;
??????float:?left;
??????line-height:?center;
??????text-align:?center;
??????cursor:?pointer;
????}
????.wrap?ol?.on?{
??????background:?#E97305;
??????color:?#fff;
????}
??</style>
??<script?type="text/javascript">
????window.onload?=?function?()?{
??????var?wrap?=?document.getElementById('wrap'),
????????pic?=?document.getElementById('pic'),
????????list?=?document.getElementById('list').getElementsByTagName('li'),
????????index?=?0,
????????timer?=?null;
??????//自動播放li
????????timer?=?setInterval(autoPlay,?1000);
??????//封裝自動切換函數
??????function?autoPlay()?{?
????????index++;
????????if?(index?>=?list.length)?{
??????????index?=?0;
????????}
????????picChange(index);
??????}
??????//封裝切換圖片函數
??????function?picChange(curindex)?{
????????for?(i?=?0;?i?<?list.length;?i++)?{
??????????list[i].className?=?'';
????????}
????????//li自動高亮
????????list[curindex].className?=?'on';
????????pic.style.top?=?-(curindex?*?170)?+?"px";
??????}
??????//封裝定時器函數
??????function?intimer()?{
????????timer?=?setInterval(function?()?{
??????????index++;
??????????if?(index?>=?list.length)?{
????????????index?=?0;
??????????}
??????????//將其他的li高亮清除
??????????for?(i?=?0;?i?<?list.length;?i++)?{
????????????list[i].className?=?'';
??????????}
??????????//li自動高亮
??????????list[index].className?=?'on';
??????????pic.style.top?=?-(index?*?170)?+?"px";
????????},?1000)
??????}
??????//鼠標滑過和離開狀態
??????for?(let?j?=?0;?j?<?list.length;?j++)?{
????????pic.onmouseover?=?function?()?{
??????????clearInterval(timer);
????????}
????????index?=?j;
????????pic.onmouseout?=?function?()?{
??????????console.log(index)
??????????intimer();
????????}
??????}
????}??
??</script>
</head>
<body>
??<div?class="wrap"?id='wrap'>
????<ul?id="pic">
??????<li><img?src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg"?alt=""></li>
??????<li><img?src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg"?alt=""></li>
??????<li><img?src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg"?alt=""></li>
??????<li><img?src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg"?alt=""></li>
??????<li><img?src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg"?alt=""></li>
????</ul>
????<ol?id="list">
??????<li?class="on">1</li>
??????<li>2</li>
??????<li>3</li>
??????<li>4</li>
??????<li>5</li>
????</ol>
??</div>
</body>
</html>