之前为大家分享了很多jQuery焦点图插件。今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div class="banner-box">
<div class="bd">
<ul>
<li style="background: #F3E5D8;">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img1.jpg" /></a>
</div>
</li>
<li style="background: #B01415">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img2.jpg" /></a>
</div>
</li>
<li style="background: #C49803;">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img3.jpg" /></a>
</div>
</li>
<li style="background: #FDFDF5">
<div class="m-width">
<a href="javascript:void(0);">
<img src="data:images/img4.jpg" /></a>
</div>
</li>
</ul>
</div>
<div class="banner-btn">
<a class="prev" href="javascript:void(0);"></a><a class="next" href="javascript:void(0);">
</a>
<div class="hd">
<ul>
</ul>
</div>
</div>
</div>

js代码:

 $(document).ready(function () {

            $(".prev,.next").hover(function () {
$(this).stop(true, false).fadeTo("show", 0.9);
}, function () {
$(this).stop(true, false).fadeTo("show", 0.4);
}); $(".banner-box").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
interTime: 3500,
delayTime: 500,
autoPlay: true,
autoPage: true,
trigger: "click"
}); });

via:http://www.w2bc.com/Article/15601

一款基于jQuery的全屏广告图片焦点图的更多相关文章

  1. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  3. 基于jQuery右侧带缩略图导航的焦点图

    今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可 ...

  4. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  5. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  6. 基于jQuery功能非常强大的图片裁剪插件

    今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...

  7. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  8. 一款基于jQuery的图片左右滑动焦点图

    今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...

  9. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

随机推荐

  1. RS开发日期提示控件默认为昨天之进阶篇

    时隔<RS开发日期提示控件默认为昨天>这篇博文已经很久了,请原谅我隔了这么久才继续来写这篇笔记.也希望读到这篇笔记的朋友可以从这篇笔记中学习到一些关于RS日期控件和JS的一些应用知识,当然 ...

  2. 深入一点 让细节帮你和Fragment更熟络

    有一段时间没有写博客了.作为2017年的第一篇,初衷起始于前段时间一个接触安卓开发还不算太长时间的朋友聊到的一个问题: "假设,想要对一个Fragment每次在隐藏/显示之间做状态切换时进行 ...

  3. 网络地址转换相关函数使用(inet_addr,inet_ntoa,inet_addr)

    aa 相关函数原型及参数类型: 函数原型:int inet_aton(const char *cp, struct in_addr *inp); in_addr_t inet_addr(const c ...

  4. java.lang.IllegalArgumentException: taglib definition not consistent with specification version

    web.xml报错 taglib标签错误,3.0要用jsp-config <jsp-config>    <taglib>        <taglib-uri>& ...

  5. Edit Control响应全选(Ctrl+A)

    MFC中的Edit控件用于输入数据,当输入的数据为大段数字的时候,全选功能就显得非常重要了,可偏偏在MFC中Edit控件就不 支持全选.Ctrl+A不行,双击也不行. Ctrl+C和Ctrl+V都是默 ...

  6. 显示游戏FPS帧率的几种计算方式

    FPSDisplay.cs using UnityEngine; using System.Collections; public class FPSDisplay : MonoBehaviour { ...

  7. JQuery 之CSS操作

    JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p" ...

  8. ReadOnly field saved with NULL value

    On CRM opportunity form view, i added readonly="1" for probability field. When i saved, wh ...

  9. profiler跟踪事件模板文件

    查找执行情况最差的查询. 例如,可以创建一个捕获与 TSQL 和 Stored Procedure 事件类(RPC:Completed 和SQL:BatchCompleted)相关的事件的跟踪.在此跟 ...

  10. ubuntu PATH 出错修复

    我的 ubuntu10.10设置交叉编译环境时,PATH 设置错误了,导致无法正常启动,错误情况如下: { PATH:找不到命令ubuntu2010@ubuntu:~$ ls命令 'ls' 可在 '/ ...