js轮播图

把html和css样式写好

<div id="box1">
			<ul id="imglist">
				<li><img src="../img/001.jpeg" alt=""></li>
				<li><img src="../img/002.jpeg" alt=""></li>
				<li><img src="../img/1.jpg" alt=""></li>
				<li><img src="../img/3.jpeg" alt=""></li>
				<li><img src="../img/a.jpg" alt=""></li>
				<li><img src="../img/001.jpeg" alt=""></li>
			</ul>
			<div id="navDiv">
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		</div>

css样式

* {
				margin: 0;
				padding: 0;
			}
 
			ul li {
				list-style: none;
			}
 
			#box1 {
				width: 520px;
				height: 300px;
				margin: 80px auto;
				background-color: #bfa;
				padding: 10px 0;
				position: relative;
				overflow: hidden;
 
			}
 
			#imglist {
				/* width: 2600px; */
				position: absolute;
			}
 
			#imglist img {
				width: 500px;
				height: 300px;
			}
 
			#imglist li {
				float: left;
				margin: 0 10px;
			}
 
			#navDiv {
				position: absolute;
				bottom: 10px;
				/* left: 40%; */
				opacity: 0.5;
 
			}
 
			#navDiv a {
				float: left;
				width: 15px;
				height: 15px;
				margin: 0 5px;
				border-radius: 50%;
				background-color: skyblue;
 
			}
 
			#navDiv a:hover {
				background: black;
			}

js样式

//获取ul的id
			var imglist = document.getElementById('imglist');
			//获取所有的img标签
			var imgArr = document.getElementsByTagName('img');
			//设置ul的宽度，自适应
			imglist.style.width = 520 * imgArr.length + 'px';
			//获取navDiv的id
			var navDiv = document.getElementById('navDiv');
			//获取父元素box1
			var box1 = document.getElementById('box1');
			//设置div的自适应居中
			navDiv.style.left = (box1.offsetWidth - navDiv.offsetWidth) / 2 + 'px';
			//设置默认索引值
			var index = 0;
			//获取所有的a元素
			var allA = document.getElementsByTagName('a');
			//修改a元素的背景色为黑色
			allA[index].style.background = 'black';
			//为每个超链接添加遍历
			for (i = 0; i < allA.length; i++) {
				//为每个超链接加一个num属性
				allA[i].num = i;
				//给超链接绑定单机响应函数
				allA[i].onclick = function() {
					//点击时关闭自动播放定时器
					clearInterval(timer);
					//获取索引值，并赋值给index
					index = this.num;
					//点击切换图片
					// imglist.style.left=-520*index+'px';
					//调用move函数，切换图片
					move(imglist, "left", -520 * index, 20, function() {
						//动画执行完毕，开启自动播放
						autoChange();
					});
					setA();
				}
			}
			//开启自动切换
			autoChange();
 
			//创建一个可调用a的函数
			function setA() {
				//判断是否为最后一张
				if (index >= imgArr.length - 1) {
					//将索引设为0
					index = 0;
					//将偏移量归零
					imglist.style.left = 0;
				}
				for (i = 0; i < allA.length; i++) {
					allA[i].style.background = "";
				}
				allA[index].style.background = "black";
			}
 
			var timer;
			//创建一个可控制的函数方便调用
			function autoChange() {
				//创建一个定时器
				timer = setInterval(function() {
					//索引自增
					index++;
					//判断索引，不能超过最大值
					index %= imgArr.length;
					//调用move函数，切换图片
					move(imglist, "left", -520 * index, 20, function() {
						//修改a，跟随图片切换
						setA();
					});
				}, 3000);
			}

然后我们引入move.js，不然move函数不会生效

<!--引入move函数.js-->
		<script type="text/javascript" src="../js/move.js"></script>

下面是move.js里的内容

 // var timer;
        function move(obj,attr,target,speed,callback){
            clearInterval(obj.timer);//关闭上一个定时器
            var current = parseInt(getStyle(obj,attr));//获取obj当前位置
            if(current > target){
                speed = - speed;//如果当前位置大于目标位置，应该向左移动，速度为负值
            }
            obj.timer = setInterval(function(){
                var oldValue = parseInt(getStyle(obj,attr));//获取obj原来的位置
                var newValue = oldValue + speed;//设置obj移动
                if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                    newValue = target;//不能让移动超过边界
                }
                obj.style[attr] = newValue + "px";//设置obj现在的位置
 
                if(newValue == target){//如果obj到达目标位置，则停止移动，清除定时器
                clearInterval(obj.timer);
                callback && callback();
            }
            },30);
            
        };
 
        function getStyle(obj,name){
            if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name];
            }else{
                return obj.currentStyle[name];
            };
        }