js轮播图，带导航
作者：互联网
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/BOM/03函数move和getStyle.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
/* 设置outer样式 */
#outer{
/* 设置宽高，高和图片一样就行，宽要加上外边距 */
width: 932px;
height: 432px;
/* 居中 */
margin: 50px auto;
background-color: yellowgreen;
padding: 10px 0;
/* 开启相对定位 */
position: relative;
/*裁剪溢出的部分 */
overflow: hidden;
}
/* 设置图片中的imgList */
#imgList{
/* 去除项目符号 */
list-style:none;
/* 开启绝对定位 */
position: absolute;
/* 设置偏移量，显示出下一张图 */
left: -1864px;
}
#imgList li{
/* 设置浮动 */
float:left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 20px;
/* 居中 设置left
outer宽度 932
navDiv宽度 40*4
932-160=772 772/2=386
left:386px;
这样写固定死了，所以在js里设置left，更加灵活*/
}
#navDiv a{
float:left;
width: 20px;
height: 20px;
background-color: red;
margin: 0 10px ;
/* 设置透明 */
opacity: 0.5;
/* 兼容IE8 */
filter: alpha(opacity=50);
}
/* 设置鼠标移入效果 */
#navDiv a:hover{
background-color: black;
}
</style>
<script>
window.onload=function(){
//设置imgList宽度
//获取imgList
var imgList=document.getElementById("imgList")
//获取页面中的所有img标签
var imgArr=document.getElementsByTagName("img");
//设置宽度 大于（图片宽*张数）还要考虑左右外边距
imgList.style.width=(imgArr.length+20)*912+"px";
/* 设置导航居中 */
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
navDiv.style.left = (outer.offsetWidth-navDiv.offsetWidth)/2+"px";
//默认显示图片的索引
var index=0;
//获取所有的a
var allA=document.getElementsByTagName("a");
//设置默认的a的效果
allA[index].style.backgroundColor="black";
/* 点击超链接，显示图片 */
//为所有超链接绑定单击响应函数
for(i=0;i<allA.length;i++){
//为每一个超链接添加一个num属性
allA[i].num=i;
allA[i].onclick=function(){
//关闭定时器
clearInterval(timer);
//获取超链接的索引，并将其设置为index
index=this.num;
//切换图片
/*
第一张 0 0
第二张 1 -932
第n张 n -932n
*/
//imgList.style.left=-932*index +"px";
//设置选中的a
setA();
//使用move函数来切换图像
move(imgList,"left",-932*index,30,function(){
//动画执行完毕开启autoChange
autoChange();
});
};
}
autoChange();
//定时器标识
var timer;
//自动切换图片
function autoChange(){
//开启一个定时器
timer=setInterval(function(){
//使索引自增
index++;
//判断index
if(index>allA.length){
index=0;
}
//执行动画，切换图片
move(imgList,"left",-932*index,30,function(){
//修改导航按钮
setA();
});
}, 2000);
}
//创建一个方法来设置选中的a
function setA(){
//判断当前索引是否是最后一张图片
if(index >= imgArr.length-1){
index=0;
//此时显示最后一张，最后一张和第一张一样
//通过css将最后一张切换成第一张
imgList.style.left=0;
}
//遍历所有的a，并将他们的背景颜色设置为红色
for(var i=0;i<allA.length;i++){
//去除backgroundColor就是变成默认样式：红色
allA[i].style.backgroundColor="";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor="black";
};
};
</script>
</head>
<body>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="img/11.jpg" ></li>
<li><img src="img/22.jpg" ></li>
<li><img src="img/33.jpg" ></li>
<li><img src="img/44.jpg" ></li>
<li><img src="img/11.jpg" ></li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>move函数的js代码，能执行多种简单动画
//创建一个可以执行简单动画的函数
/*
参数：
obj:要执行的动画的对象
attr：要执行的样式，比如：left height top weight
target:执行动画的目标位置
speed:移动的速度
callback:回调函数 ，这个函数将会我们动画执行完毕之后执行
*/
function move(obj,attr,target,speed,callback){
//关闭上一个定时器，
clearInterval(obj.timer);
//判断速度的正负值
//从0到target移动，则speed为正；反之，则speed为负
var current=parseInt(getStyle(obj,attr));
if (current>target){
//此时的速度应为负值
speed=-speed;
}
//开启一个定时器，用来执行动画效果
obj.timer=setInterval(function(){
//获取box1原来的left值
var oldValue=parseInt(getStyle(obj,attr));
//在旧的值上增加
var newValue=oldValue+speed;
//判断newValue的值是否超过targrt
if((speed<0 && newValue < target )||(speed >0 && newValue > target)){
newValue=target;
}
//将新值赋值给obj
obj.style[attr]=newValue+"px";
//当元素移动到target时停止
if(newValue===target){
clearInterval(obj.timer);
//有回调函数就执行
callback && callback();
}
},30);
}
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle（）方法
//在函数中，要调用赋值给形参的实参时，可以使用【】的方法
return getComputedStyle(obj,null)[name];
}else{
//IE8d的方式，没有getComputedStyle（）方法
return obj.currentstyle[name];
}
//也可以写成
//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentstyle[name];
}标签：obj,轮播,imgList,navDiv,js,target,var,导航,left 来源： https://blog.csdn.net/qq_45423800/article/details/118267173