HTML-CSS-JS轮播图综合实践总结

今天刚写了一个轮播图的综合实践...来总结一下咯

HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>6-2</title>
	<link rel="stylesheet" href="../css/css.css">
	<script src="../js/js.js"></script>
</head>
<body>
	<div class="banner" id="banner">
		<div class="nav" id="nav">
			<span class="sub-nav1" style="background-color:#ffcc00; font-weight: bold; border-radius: 8px" >首 页</span
				><span class="sub-nav2">点击看看</span
				><span class="sub-nav3">会自动的</span
				><span class="sub-nav4">我的网站</span>
		</div>
		<div class="main-slide" id="main-slide">
			<div class="slide1" style="display: block;">
				<img src="../img/1.jpg">
			</div>
			<div class="slide2">
				<img src="../img/5.jpg">
			</div>
			<div class="slide3">
				<img src="../img/3.jpg">
			</div>
			<div class="slide4">
				<img src="../img/4.jpg">
			</div>
		</div>
	</div>
</body>
</html>

CSS代码如下:

*{
	padding: 0;margin: 0;
}


.banner{
	width: 1200px;
	height: 460px;
	margin: 10px auto;
}


.main-slide{
	width: 1200px;
	height: 400px;
	position: relative;
}

.slide1,
.slide2,
.slide3,
.slide4{
	position: absolute;
	top: 0;
	cursor: pointer;
	display: none;
}


/*导航栏*/
.nav{
	width: 1200px;
	height: 60px;
	padding: 0;margin: 0;
	text-align: center;
}

.sub-nav1,
.sub-nav2,
.sub-nav3,
.sub-nav4{
	width: 300px;
	line-height: 60px;
	font-size: 20px;
	color: #666;
	font-family: "微软雅黑";
	text-align: center;
	display: inline-block;
	cursor: pointer;
}

JavaScrpit代码如下:

function byId(id) {
	return typeof(id) === "string"?document.getElementById(id) : id;
	//传进来的是(带引号的)字符串,并且判断的时候也是判断是不是为字符串,在getelement的id不带引号
}

//加载页面后再加载Js
window.onload = function () {


//全局变量
var mainSlide = byId("main-slide"),
	slides = mainSlide.getElementsByTagName('div'),
	nav	= byId("nav"),
	subNavs = nav.getElementsByTagName('span'),
	index = 0,
	timer
	;

	
//轮播效果函数
function startAutoPlay() {
	timer = setInterval(function () {
		index++;
		if (index >= slides.length) {
			index = 0;
		}
		changImg();
	},1000)
}

//改变图片函数
function changImg() {
	for (var i = 0 ; i < slides.length ; i++) {
		//隐藏图片
		slides[i].style.display = 'none';
		//清空导航栏的样式
		subNavs[i].style.background = "none";
		subNavs[i].style.fontWeight ="normal";
		subNavs[i].style.borderRadius = "0px";

	}
	slides[index].style.display = 'block';
	//显示图片
	subNavs[index].style.backgroundColor = "#FFCC00";
	subNavs[index].style.fontWeight = "bold";
	subNavs[index].style.borderRadius = "8px";
}


//1.自动轮播
//2.鼠标进入停止轮播
//3.鼠标进入对应标题(颜色加深),轮播停止,并显示对应的图片;
function slideImga() {

	//1.鼠标进入停止轮播
	mainSlide.onmouseover= function () {
		clearInterval(timer);
	}
	//2.鼠标出去恢复轮播
	mainSlide.onmouseout=startAutoPlay;

    // 5.鼠标出去导航栏继续轮播
	//subNavs[index].onmouseout=startAutoPlay;
	//nav.onmouseout=startAutoPlay;

	//4.鼠标进入对应标题(颜色加深),轮播停止,并显示对应的图片;
	for (var i = 0; i <subNavs.length; i++) {
		subNavs[i].setAttribute("data-nums",i);
		subNavs[i].onclick = function () {
			clearInterval(timer);
			index = this.getAttribute("data-nums");
			changImg();
		}
	}

	 //3.开始轮播
	startAutoPlay();
	
}

/**********主函数调用**********/
slideImga();

}

总结一下几个遇到的问题:(有些是我个人问题...)

关于span中间有空格的问题;可以参考一下https://blog.csdn.net/clarkt/article/details/46363909 这个大佬的总结.引用一下啦.大家喜欢的可以去关注他咯. 侵删.
(大部分)行内元素不能设置宽高,最起码span是不行滴吧. 如果要设置宽高直接设置成dispaly=inline-block就好啦.(浮动好像也能不过没去实现.有空再去试试)
关于先加载HTML文本再加载JS脚本,在敲代码的时候犯了一个错误,将全局变量写在了windows.onload=function{}外面.程序就不跑了啦.因为onload是等HTML加载完才进行的文件方法?所以不能先获取DOM元素,一定要加载完HTML文件才能获取DOM元素.
JS是单线程的语言吧.不能在多个地方调用同一个函数.本意是在两个地方(在1.导航栏2.停留在图片上)停止轮播(清除间歇调用),但是又要在1.离开导航栏的时候重新调用(间歇调用);2.离开图片重新调用--就是JS中第5点,可能是和前面的第2点冲突,两次响应了这个事件所以导致轮播图播放速度异常.
在JS的第4点:实现鼠标移动至导航栏的时候显示对应的图片;在这里不可以直接拿index变量来用,index在声明的时候就是用来定位现在显示的是第几张图片的. so我们需要的是什么呢:1.需要获取到鼠标在哪一个导航块中.2.获取到特定的导航块()后,将对应的index的值绑定到对应的导航块中. 所以要用一个新的变量来"data-nums"来获取特定导航块再将这个变量和对应的index的值连接起来,这样才能在获得"data-nums"的同时改变当前的index值,从而获得指定图片.

HTML-CSS-JS轮播图综合实践总结

共同学习一起进步,有什么疑惑欢迎讨论,有什么错误欢迎指出~~~~

猜你喜欢