设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 萌新训练营 › 萌新交流区 › 鼠标滑动切换图片
返回列表 发新帖
查看: 3384|回复: 1

[学习笔记] 鼠标滑动切换图片

[复制链接]
wp231957
发表于 2020-2-24 16:34:14 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 wp231957 于 2020-2-24 19:32 编辑
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>演示鼠标滑动切换图像的页面</title>
  6.         <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
  7.         <style>
  8.                 .circle ul li
  9.                                          {
  10.                                                 list-style:none;
  11.                                                 float:left;
  12.                                                         width:40px;
  13.                                                         height:40px;
  14.                                                         background:orange;
  15.                                                         margin-left:5px;
  16.                                                         border-radius: 50%;
  17.                                        
  18.                                           }
  19.                                           .circle ul
  20.                                           {
  21.                                                  overflow:hidden;
  22.                                                          height:50px;
  23.                                                          margin-top:20px;
  24.                                                          margin-left:120px;
  25.                                           }
  26.                                           .circle
  27.                                           {
  28.                                                  position:absolute;
  29.                                                          bottom:200px;
  30.                                                          left:20%;
  31.                                                          width:400px;
  32.                                                          height:400px;
  33.                                                          border:1px solid #000;
  34.                                           }
  35.                                           .circle ul li.current
  36.                                           {
  37.                                                  background:red;

  39.                                           }
  40.         </style>
  41. </head>
  42. <body>
  43.      <div class="circle" id="circle">
  44.             <img width=400px  height=400px id="img01" src="/pic/2111.png"></img>
  45.         <ul>
  46.             <li class="current"></li>
  47.             <li></li>
  48.             <li></li>
  49.             <li></li>
  50.                         <li></li>
  51.         </ul>
  52.     </div>
  53. <script>
  54.     imglist=["2111.png","2112.png","2113.png","2114.png","2115.png"];
  55.     $("#circle ul li").mouseover(function()
  56.     {
  57.         $(this).hover(function()
  58.         {
  59.                     //console.log($(this).index());
  60.             $(this).css('background', 'red');
  61.                         $("#img01").attr('src',"/pic/"+imglist[$(this).index()]);
  62.         }, function()
  63.         {
  64.             $(this).css('background', 'orange');
  65.         });
  66.     });
  67. </script>
  68. </body>
  69. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

wp231957
 楼主| 发表于 2020-2-24 19:34:49 | 显示全部楼层
示例图片
演示1.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-2 19:43

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表