1-11作业关于代码简洁性、高效性、高性能等方面有没有需要修改的

来源：1-13 作业题

从前慢_5

2018-10-30 15:35:47

除了实现效果和样式问题，关于代码简洁性、高效性、高性能等方面有没有需要修改的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQ轮播图</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="box">
<div class="title">jQuery实现轮播图</div>
<div class="slide_box">
<div class="img_box" id="img_box">
<img src="imgs/1.jpg" class="img img_active"/>
<img src="imgs/2.jpg" class="img"/>
<img src="imgs/3.jpg" class="img"/>
<img src="imgs/4.jpg" class="img"/>
<img src="imgs/5.jpg" class="img"/>
</div>
<div class="slide_btn" id="slide_btn">
<div class="btn pre" id="pre"></div>
<div class="btn next" id="next"></div>
</div>
<div class="point_box" id="point_box">
<div class="point point_active"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</div>
<script type="text/javascript" src="vendor/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/jQ.js"></script>
</body>
</html>

*{
	padding: 0;
	margin: 0;
}
body{
	font-family: Microsoft YaHei; 
}

/*轮播图整体*/
.box{
	height: 530px;
	width: 1210px;
	margin: 0 auto;
	position: relative;
}

/*轮播图标题*/
.title{
	font-size: 24px;
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
}


/*轮播图*/
.slide_box{
	width: 1200px;
	height: 460px;
	border: 5px solid #bbb;
	position: relative;
}

/*轮播图片内容*/
.img_box{
	width: 100%;
	height: 100%;
}
.img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.img_active{
	display: block;
}

/*切换按钮*/
.btn{
	height: 50px;
	width: 40px;
	position: absolute;
	top: 50%;
	margin-top: -25px;
}
.next{
	background: url(../imgs/next.png) no-repeat center;
	position: absolute;
	left: auto;
	right: 0px;
}
.pre{
	background: url(../imgs/pre.png) no-repeat center;
	position: absolute;
	left: 0px;
}
.click{
	background-color: rgba(100,100,100,0.7);
}

/*圆点*/
.point_box{
	position: absolute;
	top: auto;
	left: auto;
	bottom: 30px;
	right: 15px;
	overflow: hidden;
}

.point{
	height: 8px;
	width: 8px;
	border-radius: 8px;
	border: 2px solid #fff;
	background: #bbb;
	float: left;
	margin: 5px;
}
.point_active{
	border-color: #bbb;
	background: #fff;
}

$(function(){
	var index=0;
	var timer = null;
	var lastIndex = 0;
	var img = $('#img_box > img');
	var slide_box = $('.slide_box');
	var pre = $('#pre');
	var next = $('#next');
	var points = $('#point_box > .point');

	//切换图片和圆点
	function changeImg(ele){
		//改变上一次图片和圆点
		ele.eq(lastIndex).removeClass('img_active');
		points.eq(lastIndex).removeClass('point_active');

		//改变当前图片和圆点
		ele.eq(index).addClass('img_active');
		points.eq(index).addClass('point_active');
	}

	//自动轮播
	function autoChangeImg(ele){
		timer = setInterval(function(){
			lastIndex = index;
			if (index>=0 && index<ele.length) {
				index++;
				if(index==ele.length) index=0;
			}
			changeImg(ele);
		},1000);
	}

	//点击按钮切换图片，改变样式
	function btnClick(ele){
		ele.addClass('click');
		lastIndex = index;
		if(ele.is('#pre')){//前一张
			if (index==0) {
				index=img.length-1;
			}else{
				index--;
			}
		}else if(ele.is('#next')){//后一张
			if (index==img.length-1) {
				index = 0;
			}else{
				index++;
			}
		}
		changeImg(img);
	}
	//轮播
	function slideImg(){
		//自动轮播
		slide_box.mouseleave(function(){
			autoChangeImg(img);
		}).mouseleave().mouseenter(function(){
			clearInterval(timer);
		});

		//圆点
		points.each(function(idx){
			$(this).click(function(event){
				lastIndex = index;
				index = idx;
				changeImg(img);
			})
		})

		//按钮切换图片,改变按钮样式（鼠标经过和移出）
		$('#slide_btn').children().click(function(){
			btnClick($(this));
		}).mouseleave(function(){
			$(this).removeClass('click');
		}).mouseenter(function(){
			$(this).addClass('click');
		});

	}

	slideImg();
})

写回答

1回答