标签：des style blog http color io ar 2014 art
今天为给大家介绍一款基于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);
标签：des style blog http color io ar 2014 art
原文地址：http://www.cnblogs.com/liaohuolin/p/3959214.html
