今天为给大家介绍一款基于jquery超炫的图片切换特效。由百叶窗飞入显示图片。图片消息的时候也是百叶窗渐行渐远。用于图片展示,效果还是非常好,我们一起看下效果图:

在线预览   源码下载

来看下实现的代码。注意了,这里有引用jquery和underscore插件。

html代码:

 <div class="wrap">
<div class="box active" style="background-image: url(img/1.jpg);">
</div>
<div class="box active" style="background-image: url(img/1.jpg);">
</div>
<div class="box active" style="background-image: url(img/1.jpg);">
</div>
<div class="box active" style="background-image: url(img/1.jpg);">
</div>
<div class="box active" style="background-image: url(img/1.jpg);">
</div>
</div>

js代码:

 var imgArr = [
'img/1.jpg',
'img/2.jpg',
'img/3.jpg',
'img/4.jpg',
'img/5.jpg',
'img/6.jpg',
'img/7.jpg',
'img/8.jpg',
'img/9.jpg',
'img/10.jpg',
'img/11.jpg'
];
var speed = 2;
var firstPass = true; function goGoGo() {
var transSpeed = firstPass === true ? 0 : speed; firstPass = false; function makeActive() {
$('.box')
.addClass('active')
.css({
'background-image': 'url(' + imgArr[_.random(0, imgArr.length - 1)] + ')'
});
} $('.box.active').removeClass('active'); setTimeout(makeActive, transSpeed * 1000);
} setTimeout(goGoGo, 1000);
setInterval(goGoGo, 7000);

一款基于jquery超炫的图片切换特效的更多相关文章

  1. 一款基于jquery超炫的弹出层提示消息

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  2. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  3. 4款基于jquery的列表图标动画切换特效

    网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览   源码下载 实现的代码 ...

  4. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  5. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

  6. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  7. 基于jQuery环形图标菜单旋转切换特效

    分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...

  8. iHover – 30+ 纯 CSS3 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建(包括文件),便于修改变量.有模块化的代码, ...

  9. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

随机推荐

  1. php 5.3 垃圾回收

    1.引用计数器 php中的每个变量都存在一个zval的变量容器中, zval容易包括变量类型.值.is_ref(是否是引用).refercount(引用次数,也成为符号), 所有的符号存在一个符号表中 ...

  2. permission denied make_sock could not bind to address 81问题解决

    在apache中绑定非http标准端口时,一直出现如下的错误提示: [root@localhost ~]# /etc/init.d/httpd start Starting httpd: (13)Pe ...

  3. ocat

    <!DOCTYPE html> <html lang="zh-CN" > <head><meta http-equiv="Con ...

  4. 机器学习中的 ground truth

    维基百科关于 ground truth的解释: [Ground truth] 大致为: 在统计学和机器学习中:在机器学习中ground truth表示有监督学习的训练集的分类准确性,用于证明或者推翻某 ...

  5. 【C++】int与string互转

    int转string(注:itoa不是标准函数,OJ平台可能不接受) ; ]; string str; sprintf(temp, "%d", n); str = temp; or ...

  6. iphone 如何给cydia添加中文源和威锋源

    http://zhidao.baidu.com/question/270663590.html英文的也没关系, 步骤是这样的, 1. 打开Cydia, 下面有五个项目, 然后选倒数第二个manage, ...

  7. Eclipse 调试器:零距离接触实战技巧

    http://my.oschina.net/willSoft/blog/37784调试的方法虽然千千万万,但归根结底,就是找到引发错误的代码.Eclipse调试器的目标是让程序员能对本地或远程程序进行 ...

  8. 60款与DevOps相关的开源工具

    原文地址:https://elasticbox.com/blog/de ... ools/ 你喜欢免费的东西吗?获得开发者社区支持的自动化,开源的工具是大家梦寐以求的.这里列举了 60+ 款最棒的开源 ...

  9. RHEL7 -- systemd

    systemd 在RHEL7中,进程ID 1属于systemd这个新的进程.(代替之前版本中的init) systemd提供了以下新功能: ·并行化功能,可以提高系统的启动速度 ·按需启动守护进程,而 ...

  10. [Android实例] 拖动滑块进行图片拼合验证方式的实现

    该篇文章从eoeAndroid搬迁过来的,原文地址:[Android实例] 拖动滑块进行图片拼合验证方式的实现 现在网站上有各种各样的验证码验证方式,比如计算大小,输入图片内容等,今天在一家网站上看到 ...