一款jQuery编写的大度宽屏焦点图切换特效

焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片,

最好的是,此特效兼容IE6以及其它浏览器。

适用浏览器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

主要代码如下:

 <script type="text/javascript">
jQuery(".slider .bd li").first().before( jQuery(".slider .bd li").last() );
jQuery(".slider").hover(function(){
jQuery(this).find(".arrow").stop(true,true).fadeIn(300)
},function(){
jQuery(this).find(".arrow").fadeOut(300) });
jQuery(".slider").slide(
{ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop",autoPlay:true, vis:3,autoPage:true, trigger:"click"}
);
</script>

效果图如下:

特效下载地址:http://www.jqshare.com/Jq/fondone/id/138.html

更多特效:jquery特效

一款jQuery特效编写的大度宽屏焦点图切换特效的更多相关文章

  1. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  2. 一款jQuery满屏自适应焦点图切换特效

    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

  3. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  4. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  5. jQuery焦点图切换特效插件封装

    网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频 ...

  6. 黄聪:手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图

    前言 TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和 ...

  7. jQuery带缩略图的宽屏焦点图插件

    在线演示 本地下载

  8. 自制jQuery焦点图切换简易插件

    首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery ...

  9. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

随机推荐

  1. IGeoDatabaseBridge2.GetLineOfSight

    IGeoDatabaseBridge2.GetLineOfSight Method Returns a line-of-site indicator interpolated from the TIN ...

  2. ms sqlserver 系列之如何查看数据链接数

    [转]如何查看SQL SERVER数据库当前连接数 1.通过管理工具开始->管理工具->性能(或者是运行里面输入mmc)然后通过添加计数器添加 SQL 的常用统计然后在下面列出的项目里面选 ...

  3. 一个JS定时器类

    学习js,因为函数和定时器直接的关系是非绑定的.我不能说我开启一个定时,然后拿一个变量去记录这个setInterval的返回值,这样很麻烦. 本着面向对象的思想,利用业余时间(周末在家里)写了一个类, ...

  4. SVN-服务器搭建、apache2整合、eclipse使用

    如题,分成3个部分: 1.SVN服务器搭建.操作系统Ubuntu 14.04.2 LTS.具体方法度娘很多,不再细数. 安装:sudo apt-get install subversion 创建版本库 ...

  5. Grunt 插件使用汇总

    最近使用了很多 Grunt 插件,这里把使用 Grunt 中涉及的从开发.代码检查.单元测试.E2E 测试,直到发布所涉及的插件,做一个比较完全的汇总. 环境搭建 1. 创建 Web 前端开发环境 2 ...

  6. 用FireBreath制作浏览器插件

    参考: http://blog.csdn.net/z6482/article/details/7486921 1.下载firebreath, 安装cmake, python. 2.在FireBreat ...

  7. VS error retrieving information from user datastore

    搭建好VS2005+PB6.0的开发环境后,新建MFC智能设备应用程序工程出错,错误信息如下: error retrieving information from user datastore 很奇怪 ...

  8. 技术转载:Jni学习四:如何编写jni方法

    转载:http://blog.chinaunix.net/u1/38994/showart_1099528.html 一.概述: 在这篇文章中将会简单介绍如何编制一些简单的JNI 方法.我们都知道JN ...

  9. Jmeter如何设置断言

    1.打开飞机订票网站,登录后,确定要查找的关键字为reservation :2.在录制的登录脚本里,添加察看结果树监听器:3.运行一遍脚本:4.在察看结果树里查找reservation文本,并定位页面 ...

  10. 如何用CSS进行开发

    翻译自:How to Develop with CSS 很多web开发人员都知道CSS,但是他们很可能认为使用CSS的应用代码就是这样的: <p> <span style=" ...