js鼠标滚轮滚动图片切换效果

谁践踏了优雅 2022-03-31 03:20 338阅读 0赞

效果体验网址：[http://keleyi.com/keleyi/phtml/image/12.htm][http_keleyi.com_keleyi_phtml_image_12.htm]  
  
HTML文件代码：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <meta name="keywords" content="图片切换,滚轮,jquery" />
     6 <meta name="description" content="keleyi，演示HTML、CSS、jquery、ASP.NET案例和示例" />
     7 <title>js鼠标滚轮滚动图片切换效果-柯乐义</title><base target="_blank" />
     8 
     9 <style type="text/css">
    10 img{
         border:none; }
    11 .clear{
         clear:both}
    12 .demo{
         width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden}
    13 #images-keleyi-com{
          margin:20px 0 0 60px; width:860px}
    14 #images-keleyi-com img{
         position:absolute; margin-top:-160px;}
    15 #loading-keleyi-com{
         margin:0; color:#fff; text-align:center}
    16 #loading-keleyi-com img{
         position:ralative; margin:0}
    17 #captions-keleyi-com{
         position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(http://keleyi.com/keleyi/phtml/image/12/images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000}
    18 #scrollbar-keleyi-com{
         position:relative; top:-100px; height:2px; background:#abcd3a url(http://keleyi.com/keleyi/phtml/image/12/images/scroll.gif) repeat-x; z-index:10001}
    19 #slider-keleyi-com{
         position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(http://keleyi.com/keleyi/phtml/image/12/images/bar.gif) no-repeat; z-index:10002}
    20 a{
         color:Blue}
    21 </style>
    22 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
    23 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/image/12/keleyi.imageflow.js"></script>
    24 
    25 </head>
    26 
    27 <body>
    28 <div id="header">
    29 <div id="logo"><h1><a href="http://keleyi.com" title="返回keleyi首页">柯乐义</a></h1></div>
    30 </div>
    31 
    32 <div id="main">
    33 <h2 class="top_title"><a href="http://keleyi.com/view-blog-81.html">基于鼠标滚轮驱动的图片切换效果</a></h2>
    34 <div class="demo">
    35 <div id="imageflow-keleyi-com">
    36 <div id="loading-keleyi-com"><img src="images/loader.gif" alt="加载中" /></div>
    37 <div id="captions-keleyi-com">柯乐义</div>
    38 <div id="images-keleyi-com">
    39 <img src="http://down.keleyi.com/images/bing/2013-8-7_Honeybee_CobisRM_935C647_008_ZH-CN1223668775.jpg" alt="多彩图标按钮动画下拉菜单" longdesc="http://keleyi.com/a/bjac/cu727al8.htm" />
    40 <img src="http://down.keleyi.com/images/bing/2013-8-23_Fairytopia_ZH-CN6940724395_keleyi.jpg" alt="Fairytopia" longdesc="http://down.keleyi.com/images/bing/2013-8-23_Fairytopia_ZH-CN6940724395_keleyi.jpg" />
    41 <img src="http://down.keleyi.com/images/bing/2013-8-10_Toulouse_ZH-CN7808794431_keleyi.jpg" alt="Toulouse" longdesc="http://down.keleyi.com/images/bing/2013-8-10_Toulouse_ZH-CN7808794431_keleyi.jpg" />
    42 <img src="http://down.keleyi.com/images/bing/2013-8-18_SpiritBear_ZH-CN8342221823_keleyi.jpg" alt="SpiritBear" longdesc="http://down.keleyi.com/images/bing/2013-8-18_SpiritBear_ZH-CN8342221823_keleyi.jpg" />
    43 <img src="http://down.keleyi.com/images/bing/2013-8-22_KataleKhorCave_ZH-CN6707191757_keleyi.jpg" alt="弹出灯箱窗口浏览图片" longdesc="http://keleyi.com/a/bjac/ppdss7ux.htm" />
    44 <img src="http://down.keleyi.com/images/bing/2013-9-27_BoliviaSalt_ZH-CN10259156901_keleyi.jpg" alt="BoliviaSalt" longdesc="http://down.keleyi.com/images/bing/2013-9-27_BoliviaSalt_ZH-CN10259156901_keleyi.jpg" />
    45 <img src="http://down.keleyi.com/images/bing/2013-9-3_DwarfGoby_ZH-CN11409083216_keleyi.jpg" alt="DwarfGoby" longdesc="http://down.keleyi.com/images/bing/2013-9-3_DwarfGoby_ZH-CN11409083216_keleyi.jpg" />
    46 </div>
    47 <div id="scrollbar-keleyi-com">
    48 <div id="slider-keleyi-com"></div>
    49 </div>
    50 </div>
    51 
    52 </div>
    53 <br/>
    54 把光标停在图片上，转动鼠标滚轮就可以切换图片，也可以拖动下方水平的滚动条，也可以点击非顶端的图片切换到对应图。
    55 </div>
    56 <div id="footer">
    57 <p>Powered by keleyi.com 出处：<a href="http://keleyi.com">keleyi.com</a> <a href="http://keleyi.com/a/bjac/kvqcktk6.htm">原文</a></p>
    58 </div>
    59 <p id="stat"></p>
    60 </body>
    61 </html>

最新请参考：[http://keleyi.com/a/bjac/kvqcktk6.htm][http_keleyi.com_a_bjac_kvqcktk6.htm]

Web前端资源：[http://www.cnblogs.com/jihua/p/webfront.html][http_www.cnblogs.com_jihua_p_webfront.html]

[http_keleyi.com_keleyi_phtml_image_12.htm]: http://keleyi.com/keleyi/phtml/image/12.htm
[http_keleyi.com_a_bjac_kvqcktk6.htm]: http://keleyi.com/a/bjac/kvqcktk6.htm
[http_www.cnblogs.com_jihua_p_webfront.html]: http://www.cnblogs.com/jihua/p/webfront.html