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;//当索引自增达到上限时，索引归0if (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";}}}
}