jquery 带缩略图的焦点图特效代码

效果图

代码

 代码如下 复制代码

<!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" />
<title>带缩略图的焦点图,前端总线</title>
<link type="text/css" rel="stylesheet" href="galleryview.css" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $('#photos').galleryView({
   panel_width: 800,
   panel_height: 300,
   frame_width: 100,
   frame_height: 100
  });
 });
</script>
</head>

<body style="background-color:#333;">
<div class="div">
<div id="photos" class="galleryview" style="margin:auto;">
  <div class="panel">
     <img src="img/01.jpg" />
    <div class="panel-overlay">
      <h2>Effet du soleil sur le paysage</h2>
      <p>Photo by <a href="profile/tomharry" target="_blank"></a>.  View full-size photo <a href="photo/158829" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/02.jpg" />
    <div class="panel-overlay">
      <h2>Eden</h2>
      <p>Photo by <a href="profile/emsago" target="_blank"></a>.  View full-size photo <a href="photo/152865" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/03.jpg" />
    <div class="panel-overlay">
      <h2>Snail on the Corn</h2>
      <p>Photo by <a href="profile/baines" target="_blank"></a>.  View full-size photo <a href="photo/34453" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/04.jpg" />
    <div class="panel-overlay">
      <h2>Flowers</h2>
      <p>Photo by <a href="profile/jazza" target="_blank"></a>.  View full-size photo <a href="photo/990169" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/06.jpg" />
    <div class="panel-overlay">
      <h2>Alone Beach 2B</h2>
      <p>Photo by <a href="profile/sgursozlu" target="_blank"></a>.  View full-size photo <a href="photo/738279" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/05.jpg" />
    <div class="panel-overlay">
      <h2>Sunrise Trees</h2>
      <p>Photo by <a href="profile/a_glitch" target="_blank"></a>.  View full-size photo <a href="photo/289581" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/07.jpg" />
    <div class="panel-overlay">
      <h2>Waterfall</h2>
      <p>Photo by <a href="profile/thesaint" target="_blank"></a>.  View full-size photo <a href="photo/174331" target="_blank">here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/08.jpg" />
    <div class="panel-overlay">
      <h2>Death Valley</h2>
      <p>Photo by <a href="profile/djkmart" target="_blank"></a>.  View full-size photo <a href="photo/270109" target="_blank">here</a>.</p>
    </div>
  </div>
  <ul class="filmstrip">
    <li><img src="img/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
    <li><img src="img/frame-02.jpg" alt="Eden" title="Eden" /></li>
    <li><img src="img/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
    <li><img src="img/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
    <li><img src="img/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
    <li><img src="img/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
    <li><img src="img/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
    <li><img src="img/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
  </ul>
</div>
</div>
</body>
</html>

上面代码如果直接复制不可用，大家可点击此连接下载源码附件 

http://file.111cn.net/upload/2013/10/带缩略图的焦点图.zip

时间： 2024-09-20 09:27:09

jquery 带缩略图的焦点图特效代码的相关文章

jQuery横向擦除焦点图特效代码分享_jquery

本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: 迅雷jQuery横向擦除焦点图是一款基于jQuery实现的7屏横向擦除焦点图代码,有缩略图和标题,可以自定义标题. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc

使用jQuery仿苹果官网焦点图特效_jquery

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用. 接下来我们一起分享一下实现这款苹果焦点图的过程及源码. HTML代码: 复制代码 代码如下: <div id="gallery">     <div id="slides" style="

Jquery焦点图实例代码_jquery

本文实例讲述了Jquery焦点图实例代码.分享给大家供大家参考.具体如下: 对于很多建站的朋友来讲,焦点图并不陌生,一般的企业站,门户站都会用到焦点图.我们平时在写html代码的时候,很多人为了省时省力,对于焦点图都是在网上下载一些人家写好的代码,直接套上去即可,很多时候我自己也是这样来的.因为一个焦点图有html布局,css样式调试和最关键的 javascript语句的编写.这些都是一个很麻烦的过程. 今天我就以实例讲解,手把手教你如何写Jquery焦点图.Jquery是js封装的框架,让js

jQuery的图片滑块焦点图插件整理推荐_jquery

1.jQuery实现的右侧选项卡焦点图片轮播动画 jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击,是一段不错的焦点图切换代码. 在线演示 源码下载 2.jquery实现的网页缩略图大纲可滑动显示动态 query实现的网页缩略图大纲可滑动显示动态特效源码,是一款拥有网页大纲的缩略图显示的代码,点击滑动缩略图即可看到想要的东西,支持鼠标点击.拖动及鼠标滚动切换显示. 在线演示 源码下载 3.纯CSS3实现的自定义美化UL OL列表的3种发

jQuery实现的自适应焦点图效果完整实例_jquery

本文实例讲述了jQuery实现的自适应焦点图效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,

jquery实现的动态回到顶部特效代码_jquery

本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

js仿土豆网带缩略图的焦点图片切换效果实现方法_javascript技巧

本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/

JS实现从顶部下拉显示的带动画QQ客服特效代码_javascript技巧

本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-

jQuery带时间的日期控件代码分享_jquery

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: 带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟. 运行效果图:                    -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery带时间的日期控件代码如下 <h