零基础学做网站培训介绍

当前位置:

Jquery图片导航焦点图特效(点击小图看大图)

今天介绍一个Jquery图片导航焦点图特效,这种特效在很多网站上都使用到,特别一些大型网站上面也会经常使用到这种Jquery图片导航焦点图特效。

Jquery图片导航焦点图特效

这种Jquery图片导航焦点图特效由二部分组成,上面是大图,下面是小图,当点击小图时,上面就会显示到相应的大图,实现点击小图看大图的效果。

制作方法

  1. 下载导航下拉菜单jquery特效基础包。点击下载 提取码: cme9;
  2. 将下载的压缩包解压出来,将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里;
  3. 在头部模板header.php里找到</head> 标签,将下的代码放到</head> 标签上面;(注意文件路径)
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>
  4. 在需要显示这种焦点图的位置,放上以下的代码:
    
    
    <div class="picFocus">
    <div class="bd">
    <ul>
    <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic1.jpg" /></a></li>
    <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic2.jpg" /></a></li>
    <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic3.jpg" /></a></li>
    <li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic4.jpg" /></a></li>
    </ul>
    </div>

    <div class="hd">
    <ul>
    <li><img src="images/pic1.jpg" /></li>
    <li><img src="images/pic2.jpg" /></li>
    <li><img src="images/pic3.jpg" /></li>
    <li><img src="images/pic4.jpg" /></li>
    </ul>
    </div>

    </div>
    <script type="text/javascript">jQuery(".picFocus").slide({ mainCell:".bd ul",effect:"left",autoPlay:true });</script>
  5. 在CSS样式文件里放上以下的样式代码,用于控制焦点图的样式。
    
    
    /* 本例子css */
    .picFocus{ margin:0 auto; width:467px; border:1px solid #ccc; padding:5px; position:relative; overflow:hidden; zoom:1; }
    .picFocus .hd{ width:100%; padding-top:5px; overflow:hidden; }
    .picFocus .hd ul{ margin-right:-5px; overflow:hidden; zoom:1; }
    .picFocus .hd ul li{ padding-top:5px; float:left; text-align:center; }
    .picFocus .hd ul li img{ width:109px; height:65px; border:2px solid #ddd; cursor:pointer; margin-right:5px; }
    .picFocus .hd ul li.on{ background:url("images/icoUp.gif") no-repeat center 0; }
    .picFocus .hd ul li.on img{ border-color:#f60; }
    .picFocus .bd li{ vertical-align:middle; }
    .picFocus .bd img{ width:467px; height:230px; display:block; }

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 网站上有焦点幻灯片可以让整个网站动感十足,我们在学习论坛网站制作教程时,也可以自己去制作焦点幻灯片,让自己的网站上拥有自己喜欢的焦点幻灯片效
  • 今天介绍一个Jquery图片导航焦点图特效,这种特效在很多网站上都使用到,特别一些大型网站上面也会经常使用到这种Jquery图片导航焦点图特效。
  • 我们在制作一些图片网站,由于图片比较多的情况,可以使用先让用户看到一些图片的缩略图,然后通过光标移动到小图后,显示大图的效果,就叫做图片相册
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 问:如何实现鼠标停留小图片时,自动显示出一个大图片呢?就是图中这样的,谢谢了联系我时,请说是在学做网站论坛看到的,谢谢!答: