2020 用html JavaScript实现广告轮播图切换鼠标悬浮下标且左右切换图片

最新推荐文章于 2023-10-17 17:35:38 发布

AlikeLin

最新推荐文章于 2023-10-17 17:35:38 发布

阅读量2.3k

点赞数

分类专栏：前端小练文章标签： html javascript js css

本文链接：https://blog.csdn.net/weixin_44124577/article/details/109476335

版权

本文介绍如何使用HTML和JavaScript来创建一个广告轮播图，具备鼠标悬浮在下标数字上时跳转图片以及通过左右箭头切换图片的功能。同时，文章还提及了使用正则表达式进行前端表单验证以及HTML DOM操作订单表格的相关内容。

摘要由CSDN通过智能技术生成

用html JavaScript实现广告轮播图切换鼠标悬浮下标且左右切换图片

如图所示，左右有箭头可以切换照片，鼠标悬浮下标数字可跳转图片

在这里插入图片描述

建一个style.css文件

ul,li{
   padding: 0;margin: 0; list-style: none;}
.adver{
   margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../img/adver01.jpg");}
ul{
   position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{
   display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
   
    position: absolute;
    width: 30px;
    backgrou