轮播图_没有过渡效果，带豆豆，鼠标控制停止，跳转图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
#box{
position:relative;
width:400px;
height:300px;
}
img{
position:absolute;
width:400px;
height:300px;
}
ul{
position:absolute;
right:20px;
bottom:10px;
height:40px;
}
li{
float:left;
margin-left:10px;
width:20px;
height:20px;
border-radius:50%;
background-color:orange;
}
</style>
</head>
<body style="height:1000px;">
<div id="box">
<img id="imgId" src="img/timg1.jpg" />
<ul id="btns">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="tools/util.js"></script>
<script type="text/javascript">
var arr=["timg1.jpg","timg2.jpg","timg3.jpg","timg4.jpg","timg5.jpg"];
var ord = 0;//代表当前图片的序号，从0开始。
var myTimer = null;
//初始化界面
function initUI(){
$("btns").children[0].style.backgroundColor="red";
}
//1、自动变换图片
function autoChange(){
myTimer=setInterval(function(){
//1、改变序号
ord++;//4
//2、处理边界
if(ord>arr.length-1){
ord=0;
}
//3、改变外观；
changeUI(ord);
},1000);
}
//2、停止变换
function stopChange(){
window.clearInterval(myTimer);
}
//3、跳转到指定的图片上
function goImg(transOrd){//0
//1、改变序号（把当前图片序号ord的值改为跳转的图片序号；）
ord = transOrd;
//2、改变外观
changeUI(ord);
}
function changeUI(ord){
//3、改变外观
//1)、改变图片的src
$("imgId").src="img/"+arr[ord];
//2)、改变豆豆的背景颜色。
let lis = $("btns").children;
//把所有的按钮变成橙色（初始颜色）
for(let i=0;i<lis.length;i++){
lis[i].style.backgroundColor = "orange";
}
//把当前的变成红色
lis[ord].style.backgroundColor="red";
}
window.onload = function(){
//1、初始化界面
initUI();
//2、自动变换图片；
autoChange();
//鼠标进入盒子的区域，停止变换
$("box").onmouseover = stopChange;
$("box").onmouseout = autoChange;
let lis = $("btns").children;
for(let i=0;i<lis.length;i++){
//赋值语句。
lis[i].onclick = function(){//此函数的执行必须点击li。
goImg(i);
}
}
}
</script>