效果体验网址：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="data: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

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

js鼠标滚轮滚动图片切换效果的更多相关文章

  1. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  2. js应用之实现图片切换效果

    数组的操作与应用 数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...

  3. js带缩略图的图片切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  5. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  6. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  8. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

随机推荐

  1. iOS----- Crash 分析（文二）-崩溃日志组成

    iOS Crash 分析(文二)-崩溃日志组成 现在我们看一个淘宝iOS主客崩溃的例子: ### 1.进程信息 ### Incident Identifier: E4201F10-6F5F-40F9- ...

  2. session和cookie的区别

    cookie机制和session机制的区别     具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案.     同时我们也看到,由于才服务器 ...

  3. Utility2：Appropriate Evaluation Policy

    UCP收集所有Managed Instance的数据的机制,是通过启用各个Managed Instances上的Collection Set:Utility information(位于Managem ...

  4. UpdateException-更新条目时出错分析

    不屁话1张图搞定: 我是这个错: 2015-03-27 00:25:00,493 [9] ERROR log - System.Data.Entity.Infrastructure.DbUpdateE ...

  5. 解读sencha touch移动框架的核心架构(一)

    sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构 ...

  6. 轻量级前端MVVM框架avalon - 执行流程2

    接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...

  7. [转]PHP的执行流程,PHP扩展加载过程

    原文:http://www.imsiren.com/archives/535 为了以后能开发PHP扩展..就一定要了解PHP的执行顺序..这篇文章就是为C开发PHP扩展做铺垫. web环境 我们假设为 ...

  8. Neutron 功能概述 - 每天5分钟玩转 OpenStack（65）

    从今天开始,我们将学习 OpenStack 的 Networking Service,Neutron.Neutron 的难度会比前面所有模块都大一些,内容也多一些.为了帮助大家更好的掌握 Neutor ...

  9. typeof知多少

    昨天同事给我看了一道代码题,是关于typeof的,感觉挺有意思的,在这里分享给大家,顺便自己再对typeof总结总结.如有不对,请给予指出,共同进步. 代码是这样的: <!DOCTYPE htm ...

  10. tomcat匹配请求流程(原创)

    tomcat8.0.36 配置Connector属性allowTrace为true时,允许TRACE方法,默认禁止. tomcat8.0.36有一个BUG,该BUG在8.0.37里被修复,就是一个解析 ...