一款基于jquery超炫的图片切换特效

浏览数：52 / 时间：2015年06月09日

今天为给大家介绍一款基于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);