本文重点解决根据js轮播图原理写出合理的结构与样式、并实现js交互效果问题,希望能够帮助到你
在JS中，能用 . 的地方一般都可以用 [ ] 取代
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main" id="main"> <div class="menu-box"></div> <!-- 二级菜单 --> <div class="sub-menu hide" id="sub-menu"> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">英国短毛猫</div> <span class="title mr10">英国短毛猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">英国短毛猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">英国短毛猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">英国短毛猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">暹罗猫</div> <span class="title mr10">暹罗猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">暹罗猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">暹罗猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">暹罗猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">布偶猫</div> <span class="title mr10">布偶猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">布偶猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">布偶猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">布偶猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">苏格兰折耳猫</div> <span class="title mr10">苏格兰折耳猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">苏格兰折耳猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">苏格兰折耳猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">苏格兰折耳猫：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> </div> <!-- 一级菜单 --> <div class="main-menu" id="main-menu"> <div class="menu-item"> <a href="javascript:void(0)"> 英国短毛猫<i class="icon"></i> </a> </div> <div class="menu-item"> <a href="javascript:void(0)"> 暹罗猫<i class="icon"></i> </a> </div> <div class="menu-item"> <a href="javascript:void(0)"> 布偶猫<i class="icon"></i> </a> </div> <div class="menu-item"> <a href="javascript:void(0)"> 苏格兰折耳猫<i class="icon"></i> </a> </div> </div> <!-- 焦点图 --> <div class="banner" id="banner"> <!-- javascript:void(0) 不添加链接 --> <a href="javascript:void(0)"> <div class="banner-slide slide1 banner-active"></div> </a> <a href="javascript:void(0)"> <div class="banner-slide slide2"></div> </a> <a href="javascript:void(0)"> <div class="banner-slide slide3"></div> </a> </div> <!-- 左右箭头 --> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <!-- 切换点 --> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> <script src="script.js"></script> </body> </html>
本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。
微信扫一扫打赏
支付宝扫一扫打赏
扫码加微信好友
© 2002-2022 星联科技(xinglianwangluo.com) 版权所有，并保留所有权利 老妖怪 蜀ICP备2024091751号-1
四川省广元市利州区
川公网安备 51080202000147号
