图片轮播（定时器）JS+CSS3
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#outer{
width:610px;
height:470px;
margin:0 auto;
background-color: #BBFFAA;
padding:10px 0;
position: relative;
overflow: hidden;
}
#imgList{
list-style:none;
/* width: 3050px; */
position: absolute;
/* left:0px; */
}
#imgList li{
float:left;
margin:0 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
/* 设置left outer:610px navDiv:125px*/
/* left:242px; */
}
#navDiv a{
float:left;
width: 15px;
height: 15px;
background-color: red;
margin:0 5px;
/* 透明 */
opacity: 0.5;
/* 兼容IE8透明 */、
filter:alpha(opacity=50);
}
#navDiv a:hover{
background-color: #000000;
}
</style>
<script type="text/javascript" src="fa/css/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
imgList.style.width = 610*imgArr.length + "px";
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2+"px";
var index = 0;
var allA = document.getElementsByTagName("a");
allA[index].style.backgroundColor = "black";
for(var i=0;i<allA.length;i++){
allA[i].num = i;
allA[i].onclick = function(){
clearInterval(timer);
index = this.num;
// imgList.style.left = -610*index+"px";
setA();
// 使用move函数
move(imgList,"left",-610*index,20,function(){
autoChange();
});
};
}
// 开启自动切换图片
autoChange();
// 创建方法设置选中的a
function setA(){
if(index>=imgArr.length-1){
index = 0;
imgList.style.left = 0;
}
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "black";
};
// 自动切换定时器
var timer;
// 创建函数开启自动切换函数
function autoChange(){
timer = setInterval(function(){
index++;
// index % = imgArr.length;
// 执行动画
move(imgList,"left",-610*index,20,function(){
// 修改导航按钮
setA();
});
},3000);
}
};
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li><img src="img/2.1.jpg" /></li>
<li><img src="img/2.2.jpg" /></li>
<li><img src="img/2.3.jpg" /></li>
<li><img src="img/2.4.jpg" /></li>
<li><img src="img/2.5.jpg" /></li>
<li><img src="img/2.1.jpg" /></li>
</ul>
<div id="navDiv">
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
</div>
</div>
</body>
</html>
会形成图片自动轮播，点击div会转图片
标签：CSS3,index,style,轮播,imgList,navDiv,JS,var,left 来源： https://blog.csdn.net/weixin_45215652/article/details/121527068