HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第9章动手实践

文章目录

效果
代码
- 网盘

效果

在这里插入图片描述

代码

在这里插入图片描述

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通栏效果</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="banner">
	<div class="banner_pic" id="banner_pic">
		<div class="current"><img src="images/01.jpg" alt="" /></div>
		<div class="pic"><img src="images/02.jpg" alt="" /></div>
		<div class="pic"><img src="images/03.jpg" alt="" /></div>
	</div>
	<ol id="button">
		<li class="current"></li>
		<li class="but"></li>
		<li class="but"></li>
	</ol>
</div>
</body>
</html>

index.css

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
}

.banner {
    width: 780px;
    height: 463px;
    margin: 13px auto 15px auto;
    position: relative;
    overflow: hidden;
}

.banner .banner_pic .pic {
    display: none;
}

.banner .banner_pic .current {
    display: block;
}

.banner ol {
    position: absolute;
    left: 350px;
    top: 425px;
}

.banner ol .but {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #eee;
    margin-right: 20px;
}

.banner ol li {
    cursor: pointer;
}

.banner ol .current {
    background: #fe0048;
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #fe0048;
    margin-right: 20px;
}

index.js

// JavaScript Document
//实现轮播效果
//保存当前焦点元素的索引
window.onload = function () {
	var current_index = 0;
	//2000表示调用周期，以毫秒为单位，2000毫秒就是2秒
	var timer = window.setInterval(autoChange, 2000);
	//获取所有轮播按钮
	var button_li = document.getElementById("button").getElementsByTagName("li");
	//获取所有banner图
	var pic_div = document.getElementById("banner_pic").getElementsByTagName("div");
	//遍历元素
	for (var i = 0; i < button_li.length; i++) {
		//添加鼠标滑过事件
		button_li[i].onmouseover = function () {
			//定时器存在时清除定时器
			if (timer) {
				clearInterval(timer);
			}
			//遍历元素
			for (var j = 0; j < pic_div.length; j++) {
				//将当前索引对应的元素设为显示
				if (button_li[j] == this) {
					current_index = j; //从当前索引位置开始
					button_li[j].className = "current";
					pic_div[j].className = "current";
				} else {
					//将所有元素改变样式
					pic_div[j].className = "pic";
					button_li[j].className = "but";
				}
			}
		}
		//鼠标移出事件
		button_li[i].onmouseout = function () {
			//启动定时器，恢复自动切换
			timer = setInterval(autoChange, 2000);
		}
	}

	function autoChange() {
		//自增索引
		++current_index;
		//当索引自增达到上限时，索引归0
		if (current_index == button_li.length) {
			current_index = 0;
		}
		for (var i = 0; i < button_li.length; i++) {
			if (i == current_index) {
				button_li[i].className = "current";
				pic_div[i].className = "current";
			} else {
				button_li[i].className = "but";
				pic_div[i].className = "pic";
			}
		}
	}
}

网盘

链接：https://pan.baidu.com/s/1Z5ytspOCqOliaxzTcFZwMw?pwd=1024
提取码：1024

图片素材：

HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第9章动手实践

文章目录

效果

代码

网盘

悦读