JavaScript面向对象焦点图片轮播banner

最新推荐文章于 2022-06-05 18:04:56 发布

原创

最新推荐文章于 2022-06-05 18:04:56 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #面向对象 #banner #焦点轮播

本文是2016年4月2日的JavaScript学习笔记，重点介绍了如何使用面向对象的方法实现一个焦点图片轮播banner。内容包括HTML和CSS的布局设计以及JavaScript部分的逻辑实现。

2016-04-02 JavaScript学习笔记

实例：焦点轮播图

HTML / CSS部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul,ol {list-style:none;}
img {border:none;}
.banner {height:320px; width:852px; position:relative; margin:30px auto;}
.imgs li {height:320px; width:852px; position:absolute; left:0; top:0; opacity:0;}
.nav {position:absolute; bottom:15px; right:15px;}
.nav li {width:20px; height:20px; filter:alpha(opacity:60); opacity:0.6; background:#fff; z-index:3;
color:#000; background:#fff; border:1px solid #000; font-size:12px; text-align:center; line-height:20px;font-weight:600; margin-left:2px; float:left; cursor:pointer;}
.nav li.active {background:#000; border:1px solid #fff; color:#fff;}
</style>
<script src