效果体验网址：http://keleyi.com/keleyi/phtml/image/12.htm

HTML文件代码：

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="keywords" content="图片切换,滚轮,jquery" />

 <meta name="description" content="keleyi，演示HTML、CSS、jquery、ASP.NET案例和示例" />

 <title>js鼠标滚轮滚动图片切换效果-柯乐义</title><base target="_blank" />

 <style type="text/css">

 img{border:none; }

 .clear{clear:both}

 .demo{width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden}

 #images-keleyi-com{ margin:20px 0 0 60px; width:860px}

 #images-keleyi-com img{position:absolute; margin-top:-160px;}

 #loading-keleyi-com{margin:0; color:#fff; text-align:center}

 #loading-keleyi-com img{position:ralative; margin:0}

 #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}

 #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}

 #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}

 a{color:Blue}

 </style>

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/image/12/keleyi.imageflow.js"></script>

 </head>

 <body>

 <div id="header">

 <div id="logo"><h1><a href="http://keleyi.com" title="返回keleyi首页">柯乐义</a></h1></div>

 </div>

 <div id="main">

 <h2 class="top_title"><a href="http://keleyi.com/view-blog-81.html">基于鼠标滚轮驱动的图片切换效果</a></h2>

 <div class="demo">

 <div id="imageflow-keleyi-com">

 <div id="loading-keleyi-com"><img src="data:images/loader.gif" alt="加载中" /></div>

 <div id="captions-keleyi-com">柯乐义</div>

 <div id="images-keleyi-com">

 <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" />

 <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" />

 <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" />

 <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" />

 <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" />

 <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" />

 <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" />

 </div>

 <div id="scrollbar-keleyi-com">

 <div id="slider-keleyi-com"></div>

 </div>

 </div>

 </div>

 <br/>

 把光标停在图片上，转动鼠标滚轮就可以切换图片，也可以拖动下方水平的滚动条，也可以点击非顶端的图片切换到对应图。

 </div>

 <div id="footer">

 <p>Powered by keleyi.com 出处：<a href="http://keleyi.com">keleyi.com</a> <a href="http://keleyi.com/a/bjac/kvqcktk6.htm">原文</a></p>

 </div>

 <p id="stat"></p>

 </body>

 </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. highchart导出图片

    http://www.cnblogs.com/jasondan/p/3504120.html 项目中需求导出报表为图片存到Excel中去,或供其它页面调用. 开始存到截屏,但由于用户电脑分辨率不一样, ...

  2. OpenJDK 编译-Linux环境

    说明:笔者是在Ubuntu 16.04虚拟机中编译 OpenJDK 8 源码下载 http://download.java.net/openjdk/jdk8/ 推荐直接下载openjdk-8-src- ...

  3. javascript 闭包

    闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  4. Conversion Operators in OpenCascade

    Conversion Operators in OpenCascade eryar@163.com Abstract. C++ lets us redefine the meaning of the ...

  5. SVM算法

    本文主要介绍支持向量机理论推导及其工程应用. 1 基本介绍 支持向量机算法是一个有效的分类算法,可用于分类.回归等任务,在传统的机器学习任务中,通过人工构造.选择特征,然后使用支持向量机作为训练器,可 ...

  6. Android之计算缓存大小并且清空缓存

    转载博客:http://www.2cto.com/kf/201503/385492.html 项目中碰到了计算缓存大小和清空缓存的功能,这个很常见的功能,几乎每个APP都有,以为实现很简单,网上搜了一 ...

  7. scikit-learn决策树算法类库使用小结

    之前对决策树的算法原理做了总结,包括决策树算法原理(上)和决策树算法原理(下).今天就从实践的角度来介绍决策树算法,主要是讲解使用scikit-learn来跑决策树算法,结果的可视化以及一些参数调参的 ...

  8. MyCAT日志分析

    MyCAT日志对于了解MyCAT的运行信息不可获取,譬如MyCAT是否采用读写分离,对于一个查询语句,MyCAT是怎样执行的,每个分片会分发到哪个节点上等等. 默认是info级别,通过log4j.xm ...

  9. 为SharePoint Server 2013 建立搜索爬行

    当搭建好SharePoint Server 2013 之后系统内的爬行信息是空白的,因此需要进行搜索爬行行为的开启. 确认系统上的服务 首先进入到系统的服务中services.msc 确保如下的Sha ...

  10. C语言 第六章 多重循环练习

    一.循环输入 #include "stdio.h" void main() { char c; do { printf("我告诉你1+1=2\n"); prin ...