首页 > 代码库 > 一款基于jquery超炫的图片切换特效
一款基于jquery超炫的图片切换特效
今天为给大家介绍一款基于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超炫的图片切换特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。