今天刚写了一个轮播图的综合实践...来总结一下咯
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.οnlοad=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值,从而获得指定图片.
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
