简易轮播图

最新推荐文章于 2024-08-11 02:49:42 发布

cv小战士

最新推荐文章于 2024-08-11 02:49:42 发布

阅读量63

点赞数

分类专栏：轮播图文章标签： html

本文链接：https://blog.csdn.net/c210604/article/details/118496960

版权

轮播图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           button{
                           border: 1px solid yellow;/*边框1像素，细实线，黄色边框*/
                           border-radius: 50%;/*弧度，50%，100%是园*/
                           width: 28px;/*最好设置高与宽一样*/
                           height: 28px;
                           background: transparent;/*背景色透明 */
                           color: white; /*字的颜色是白色*/
                       }
       </style>
   </head>
   <body>
       
       <img src="img/1.jpg" id="tp"/>
       <div style="margin-top: -55px;margin-left: 460px;">
       <br>
           
       <button οnmοuseenter="huantp(1)">1</button>
       <button οnmοuseenter="huantp(2)">2</button>
       <button οnmοuseenter="huantp(3)">3</button>
       <button οnmοuseenter="huantp(4)">4</button>
       <button οnmοuseenter="huantp(5)">5</button>
       <button οnmοuseenter="huantp(6)">6</button>
       <button οnmοuseenter="huantp(7)">7</button>
       <button οnmοuseenter="huantp(8)">8</button>
       <button οnmοuseenter="huantp(9)">9</button>
       </br></div>
       <script>
           //添加一个功能，取名为huantp。
           function huantp(i){
               // 将img1图片改为其他图片
               document.getElementById("tp").src="img/"+i+".jpg";
           }
       </script>
   </body>
</html>

cv小战士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> button{ border: 1px solid yellow;/*边框1像素，细实线，黄色边框*/ ...
复制链接

扫一扫

专栏目录