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

作者：代码吟游诗人 | 2024-02-01 18:35:52

踩

jq面向对象轮播图

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;}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54528