我又思考了，修改了一部分问题，还是有问题

来源：5-6 作业题

迷失的小麦

2019-12-20 11:54:31

https://class.imooc.com/course/qadetail/179927

<!doctype html>
<html><head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>轮播图</title>
</head>

<body> 
	<div id="menu">
		<div id="nav">
			<div class="bg">首页</div>
			<div>点击查看</div>
			<div>会自动的</div>
			<div>我的网站</div>
		</div>
		<div id="banner">
			<div id="hezi">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="button">
			<div></div>
			<div></div>
		</div>
	</div>
</body>
<script>
		window.onload=function(){
		//封装查找节点的函数
		function id(id){
			return typeof(id)==="string"?document.getElementById(id):id;
		}
		var menu=id("menu"),//最外面的盒子
			nav=id("nav"),//导航条
			navneirong=nav.getElementsByTagName("div"),
			banner=id("banner"),//图片
			hezi=id("hezi"),//移动的盒子
			img=hezi.getElementsByTagName("div"),
			imgWidth=img[0].offsetWidth,//图片的宽度
			length=img.length,//图片的个数
			button=id("button").getElementsByTagName("div"),//按钮
			timer=null,
			timer2=null,
			index=0;
		//封装创建事件的函数
		function addHandler(element, type, handler) {
    		if (element.addEventListener) {
        		element.addEventListener(type, handler, true);
    		}
    		else if (element.attachEvent) {
        		element.attachEvent('on' + type, handler);
    		}
    		else {
        		element['on' + type] = handler;
    		}
			}
		//利用定时器封装滑动效果的函数
		function donghua(){
			clearInterval(timer);//先清除定时器
			timer=setInterval(function(){
				var juli=hezi.offsetLeft;
				var target=-index * imgWidth;
				var panduan=juli > target ? true : false;
				//主要是这段代码不理解，为什么juli-=10;？逻辑分析一下？而且肯定有问题
				if(panduan){
				   juli-=40;
				   }else{
				   juli+=40;
				   }
				if (panduan ? juli > target : juli < target) {
                    hezi.style.left = juli + "px";  //如果当前位置不是在目标位置则进行位置处理
                } else {
                    clearInterval(timer);
                    hezi.style.left = target + "px";
                }/**/
			},10);
		}
		//封装自动轮播的效果的函数
		function dingshiqi(){
			timer2=setInterval(function(){
				if (index == len - 1) {//确定图片的索引
                index = 0;
                hezi.style.left = 0 + "px";
            	}
				index++;
				donghua();
				for(var j=0;j<navneirong.length;j++){//切换按钮
					navneirong[j].className="";
				};
				navneirong[index].className="bg";
			},3000);
		}
		//封装解除自动轮播的函数
		function qingchu(){
			if(timer2){clearInterval(timer2);}
		}
		//给向右移动的按钮添加事件
		addHandler(button[1],"click",function(){
			if(index==0){//确定图片的索引
				index=length-1;
				hezi.style.left=-index * imgWidth + "px";
				navneirong[0].className="bg";
			}
			index--;
			donghua();
			for(var j=0;j<navneirong.length;j++){//改变导航条
					navneirong[j].className="";
				};
				navneirong[index].className="bg";
		});
		//给向左移动的按钮添加事件
		addHandler(button[0],"click",function(){
			if (index == len - 1) {//确定图片的索引
                index = 0;
                hezi.style.left = 0 + "px";
				navneirong[0].className="bg";
            }
            index++;
			donghua();
			for(var j=0;j<navneirong.length;j++){//改变导航条
					navneirong[j].className="";
				};
				navneirong[index].className="bg";
		});
		//给导航条添加事件
		for(var i=0,len=img.length;i<len-1;i++){
			navneirong[i].id=i;
			addHandler(navneirong[i],"click",function(){
				index=this.id;
				for(var d=0;d<navneirong.length;d++){
					if(d==index){
					   navneirong[d].className="bg";
					   img[d].className="";
					   }else{
					   navneirong[d].className="";
					   img[d].className="hide";//隐藏除当前选中的图片   
					   }
					if(index==img.length-1){
						navneirong[0].className="bg";
						index=0;
						img[0].className="";
						img[4].className="hide";
					}
					//添加一个判断，当图片为最后一张跳转第一张
				}
			});
		}
		//添加自动轮播事件
		dingshiqi();
		addHandler(menu,"mouseover",qingchu);
		addHandler(menu,"mouseout",dingshiqi);
		}
</script>
</html>

写回答

1回答