JS秘技--焦点轮播图

一：查询知识点

1.offset:

****2.通过类名获取元素时，即getElementsByClassName(""),返回的是一个该类名元素的集合，即一个数组，即便只有一个元素拥有该类名，所有要想使用该元素，需要给数组  加上索引，example:getElementsByClassName("")[0] ;  (不了解很容易产生问题)

3.通过 元素.style.left获取的是行内样式的left，如果没有设置行内样式，就获取不到该left; (也容易产生错误) 

4.当使用a链接的空链接，一定要给href属性加上 #  ,要不然产生点击事件时，会重新加载整个页面，产生错误；或者 javascript:: ；最佳用法（javascript:void(0)）

5.JS原生中使用querySelector()和querySelectorAll()选取元素更好用；

6.for ...in 是JS原生中的方法；

 

（代码可能有很多瑕疵，望谅解，可以在评论中建议，谢谢）

二：代码

html:

 

焦点轮播图

• 
• 
• 
• 

1 2 3 4





 

css:

 

/*reset*/
div,ul,li,img{
	margin:0;
	padding:0;
}
ul,li{
	list-style: none;
}
li{
	float:left;
}
a{
	text-decoration: none;
	color:#00bb00;
}
/*公共样式*/
img{
	width:600px;
	height:350px;
	border-radius:3px;
}
.btn_num a{
	text-decoration: none;
	color:#00BB00;
	margin-right:5px;
}
/*页面样式*/
@font-face {
  font-family: 'iconfont';  /* project id 288961 */
  src: url('//at.alicdn.com/t/font_bo9hezqud0k3ayvi.eot');
  src: url('//at.alicdn.com/t/font_bo9hezqud0k3ayvi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_bo9hezqud0k3ayvi.woff') format('woff'),
  url('//at.alicdn.com/t/font_bo9hezqud0k3ayvi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_bo9hezqud0k3ayvi.svg#iconfont') format('svg');
}
.pre i{
	font-family: 'iconfont';
	font-style:normal;
	font-size:45px;
}
.aft i{
	font-family: 'iconfont';
	font-style:normal;
	font-size:45px;
}
.main{
	position:relative;
	
}
div .img_con{
	width:600px;
	height:350px;
	overflow: hidden;
	margin:0 auto;
	position: relative;
	margin-top:120px;
}
div .img_con ul{
	/*必须给ul设置宽度，使列表项浮动后后排列在同一排*/
	width:2500px;
	position: absolute;
	left:0px;
}
.btn_num{
	position: absolute;
	top:295px;
	right:375px;
}
.pre{
	position: absolute;
	top:130px;
	left:250px;
}
.aft{
	position: absolute;
	top:130px;
	right:250px;
}

js:

/*1.每隔2.5秒切换下图片
 *2.点击左右切换按钮，切换图片，当为最后一站图片时按下向右切换牛自动切换到第一张图片
 *3.点击数字按钮切换到相应图片
 */

window.onload = function(){
	var box = document.getElementsByClassName("box_img");
	var pre = document.getElementById("pre");
	var aft = document.getElementById("aft");
	var lis = document.querySelectorAll(".btn_num a");
	
	/*先获取新的left值，判断该图是否是第一张或者最后一张，再做相应处理*/
	function animate(set){
		let new_left = parseInt(box[0].style.left) + set;
		if(new_left == -2400){
			new_left = 0;
		}else if(new_left == 600){
			new_left = -1800;
		};
		box[0].style.left = new_left + "px";
	};
	pre.onclick = function(){
		clearInterval(timer);
		animate(600);
		timer = setInterval(function(){
			let new_left = parseInt(box[0].style.left) - 600;
			if(new_left == -2400){
				new_left = 0;
			};
			box[0].style.left = new_left + "px";
		},2500);
	};
	aft.onclick = function(){
		clearInterval(timer);
		animate(-600);
		timer = setInterval(function(){
			let new_left = parseInt(box[0].style.left) - 600;
			if(new_left == -2400){
				new_left = 0;
			};
			box[0].style.left = new_left + "px";
		},2500);
	};
	for(let i in lis){
		lis[i].onclick = function(){
			clearInterval(timer);
			box[0].style.left = -600 * i + "px";
			timer = setInterval(function(){
				let new_left = parseInt(box[0].style.left) - 600;
				if(new_left == -2400){
					new_left = 0;
				};
				box[0].style.left = new_left + "px";
			},2500);
		};
	};
	//使用定时器进行轮播
	var timer = setInterval(function(){
		let new_left = parseInt(box[0].style.left) - 600;
		if(new_left == -2400){
			new_left = 0;
		};
		box[0].style.left = new_left + "px";
	},2500);
	
};

 

三：效果图