效果预览:http://hovertree.com/texiao/jquery/51/

这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换。

使用的jQuery库版本为1.12.3 ,当然项1.11.1等也是可以的。下载地址:http://hovertree.com/h/bjaf/ati6k7yk.htm

效果图:

代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jQuery适合风景展现幻灯片代码 - 何问起</title><base target="_blank" />
  6. <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/51/images/index.css">
  7. <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
  8. <script type="text/javascript" src="http://hovertree.com/texiao/jquery/51/js/jquery.slides.js"></script>
  9.  
  10. </head>
  11. <body>
  12. <div style="text-align:center;"><h1>jQuery带缩略图的图片切换</h1></div>
  13. <div id="yxh_article">
  14. <div class="slider_box" id="slider_name">
  15.  
  16. <div class="mask"></div>
  17.  
  18. <ul class="silder_con">
  19.  
  20. <li class="silder_panel"><a href="http://hovertree.com/h/bjaf/41eyinh2.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/uqa9cu66.jpg" width="600" height="375" /></a></li>
  21. <li class="silder_panel"><a href="http://hovertree.com/texiao/game/" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/2m6dep2i.jpg" width="600" height="375" /></a></li>
  22. <li class="silder_panel"><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/rrlmyu1g.jpg" width="600" height="375" /></a></li>
  23. <li class="silder_panel"><a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" width="600" height="375" /></a></li>
  24.  
  25. </ul>
  26. <div class="silder_intro">
  27. <h3>荷叶</h3>
  28. </div>
  29. <div class="silder_intro">
  30. <h3>内衣</h3>
  31. </div>
  32.  
  33. <div class="silder_intro">
  34. <h3>沙滩</h3>
  35. </div>
  36.  
  37. <div class="silder_intro">
  38. <h3>大海</h3>
  39. </div>
  40.  
  41. <ul class="silder_nav dec">
  42. <li><a href="http://hovertree.com/h/bjaf/41eyinh2.htm"><img src="http://hovertree.com/hvtimg/bjafjd/uqa9cu66.jpg" width="110" height="48" /></a></li>
  43. <li><a href="http://hovertree.com/texiao/game/"><img src="http://hovertree.com/hvtimg/bjafjd/2m6dep2i.jpg" width="110" height="48" /></a></li>
  44. <li><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm"><img src="http://hovertree.com/hvtimg/bjafjd/rrlmyu1g.jpg" width="110" height="48" /></a></li>
  45. <li><a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm"><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" width="110" height="48" /></a></li>
  46. </ul>
  47. </div>
  48.  
  49. </div>
  50.  
  51. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  52. <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  53. <p>来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/picqiehuan.htm">原文</a></p>
  54. </div>
  55. </body>
  56. </html>

转自:http://hovertree.com/h/bjaf/picqiehuan.htm

推荐:http://hovertree.com/texiao/jquery/53/

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

jQuery图片轮播特效的更多相关文章

  1. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  2. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  4. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  5. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  6. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. 前端福利之jQuery文字轮播特效(转)

    闲谈:离开学校那座象牙塔已经也有大半年的事件了,生活中不再充满了茫然只有忙碌.连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总 ...

  9. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

随机推荐

  1. ASP.NET MVC 5 入门指南汇总

    经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解 ...

  2. Hadoop学习笔记—19.Flume框架学习

    START:Flume是Cloudera提供的一个高可用的.高可靠的开源分布式海量日志收集系统,日志数据可以经过Flume流向需要存储终端目的地.这里的日志是一个统称,泛指文件.操作记录等许多数据. ...

  3. ASP.Net WebForm温故知新学习笔记:一、aspx与服务器控件探秘

    开篇:毫无疑问,ASP.Net WebForm是微软推出的一个跨时代的Web开发模式,它将WinForm开发模式的快捷便利的优点移植到了Web开发上,我们只要学会三步:拖控件→设属性→绑事件,便可以行 ...

  4. Redis系列(四)-低成本高可用方案设计

    关于Redis高可用方案,看到较多的是keepalived.zookeeper方案. keepalived是主备模式,意味着总有一台浪费着.zookeeper工作量成本偏高. 本文主要介绍下使用官方s ...

  5. Linux 搭建FTP服务器

    介绍 本章主要介绍在Linux中搭建FTP服务器的过程,需要掌握的要点是配置文件的合理配置. 知识点 在linux中使用的FTP是vsftp FTP可以有三种登入方式分别是: 匿名登录方式:不需要用户 ...

  6. Web3DGame之路(三)分析babylonjs

    BabylonJS的例子十分详实 http://doc.babylonjs.com/tutorials Babylonjs的学习比较顺畅,开始做一些深入分析   一.语言选择 首先是js还是ts的问题 ...

  7. 《R in Action》读书笔记(1)

    MindMapper 原文件

  8. 2013 duilib入门简明教程 -- 界面布局(9)

        上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayou ...

  9. html5多出来的字自动隐藏并显示...

  10. LINQ系列:Linq to Object串联操作符

    串联是一个将两个对象联接在一起的过程.在LINQ中,串联操作将两个集合合并成一个集合,通过Concat操作符实现. Concat 1>. 原型定义 public static IQueryabl ...