jQuery插件animateSlide制作多点滑动幻灯片

首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创)。

直接上代码,把html、css和jquery代码copy到页面上即可呈现完美画面。

html代码如下:

<div class="animateSlide">
  <div class="animateSlideImgWrap">
    <div class="animateSlideImgBox present">
      <p class="text1">亲,这是第一行标题</p>
      <p class="text2">AAAAAAAAAAAAAAAAAAAAA</p>
      <!--<img class="img" alt="" src="img/1.png" />-->
      <div class="img" style="width: 500px; height: 390px; background: #ffaeae; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片,目前临时用div代替图片 -->
    </div>
    <div class="animateSlideImgBox">
      <p class="text1">亲,这是一行宣传语</p>
      <p class="text2">BBBBBBBBBBBBBBBBBBBBB</p>
      <!--<img class="img" alt="" src="img/2.png" />-->
      <div class="img" style="width: 500px; height: 390px; background: #aeffb2; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片,目前临时用div代替图片 -->
    </div>
    <div class="animateSlideImgBox">
      <p class="text1">亲,这是一个奇迹啊</p>
      <p class="text2">CCCCCCCCCCCCCCCCCCCCC</p>
      <!--<img class="img" alt="" src="img/3.png" />-->
      <div class="img" style="width: 500px; height: 390px; background: #aebdff; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片,目前临时用div代替图片 -->
    </div>
  </div>
  <div class="animateSlideBtnL"><</div>
  <div class="animateSlideBtnR"><</div>
</div>

css代码如下:

.animateSlide {width: 100%; height: 390px; position: relative; background: #f5f5f5;}
.animateSlideImgWrap {width: 100%; height: 390px; position: absolute; z-index: 1; overflow: hidden;}
.animateSlideImgWrap .present {display: block;}
.animateSlideImgBox {width: 100%; height: 390px; position: absolute; z-index: 1; display: none;}
.animateSlideImgBox .text1 {font-family: Microsoft YaHei; font-size: 36px; line-height: 1.2em; color: #384cd0; position: absolute; top: 120px; z-index: 3; white-space: nowrap;}
.animateSlideImgBox .text2 {font-family: Microsoft YaHei; font-size: 26px; line-height: 1.2em; color: orange; position: absolute; top: 200px; z-index: 3; white-space: nowrap;}
.animateSlideImgBox .img {position: absolute; left: 470px; top: 0; z-index: 2;}
.animateSlideBtnL,
.animateSlideBtnR {
  width: 30px; height: 60px; line-height: 60px; font-size: 20px; font-weight: 700; text-align: center; background: #ddd;
  position: absolute; left: 30px; top: 150px; z-index: 6; cursor: pointer; display: none;
}
.animateSlideBtnR {left: auto; right: 20px;}

jquery代码如下:

(function($) {
  $.fn.animateSlide = function(options) {
    var defaults = {
      btnL: ".animateSlideBtnL",
      btnR: ".animateSlideBtnR",
      imgBox: ".animateSlideImgBox",
      animateTime: 500,
      delayTime: 5000,
      density: 1
    };
    var opts = $.extend(defaults, options);
    var widthWin = $(window).width();
    $(window).resize(function() {
      widthWin = $(window).width();
    });
    //
    this.on("mouseenter", function() {
      $(this).find(".animateSlideBtnL, .animateSlideBtnR").stop().fadeIn(400);
    }).on("mouseleave", function() {
      $(this).find(".animateSlideBtnL, .animateSlideBtnR").stop().fadeOut(400);
    });
    return this.each(function() {
      var _this = $(this);
      var _btnL = _this.find(opts.btnL);
      var _btnR = _this.find(opts.btnR);
      var _imgBox = _this.find(opts.imgBox);
      var _imgBoxCur = _imgBox.filter(".present");
      var _curText1 = _imgBoxCur.find(".text1"), _curText2 = _imgBoxCur.find(".text2"), _curImg = _imgBoxCur.find(".img");
      var _imgBoxNext = null, _nextText1 = null, _nextText2 = null, _nextImg = null;
      var index = _imgBox.index(_imgBoxCur) || 0;
      var size = _imgBox.size();
      var start = null;
      index++;
      if(index >= size) {
        index = 0;
      }
      _imgBoxNext = _imgBox.eq(index);
      _nextText1 = _imgBoxNext.find(".text1");
      _nextText2 = _imgBoxNext.find(".text2");
      _nextImg = _imgBoxNext.find(".img");
      _imgBox.find(".text1, .text2, .img").css("left", widthWin);
      _imgBoxCur.find(".text1, .text2").css("left", (widthWin - 980) / 2 + "px");
      _imgBoxCur.find(".img").css("left", (widthWin - 980) / 2 + 470 + "px");
      _btnR.on("click", function() {
        animateSlideFn();
      });
      _btnL.on("click", function() {
        animateSlideFn();
      });
      start = setTimeout(function() {
        animateSlideFn();
        start = setTimeout(arguments.callee, opts.delayTime);
      }, opts.delayTime);
      function animateSlideFn() {
        if(!(_imgBoxCur.find(".text1, .text2, .img").is(":animated") || _imgBoxNext.find(".text1, .text2, .img").is(":animated"))) {
          //当前帧动画
          _curText1.animate({
            left: parseInt(_curText1.css("left")) + 100
          }, opts.animateTime * 0.6, function() {
            _curText1.animate({
              left: "-510px"
            }, opts.animateTime);
          });
          setTimeout(function() {
            _curText2.animate({
              left: parseInt(_curText2.css("left")) + 100
            }, opts.animateTime * 0.6, function() {
              _curText2.animate({
                left: "-510px"
              }, opts.animateTime);
            });
          }, 200);
          setTimeout(function() {
            _curImg.animate({
              left: parseInt(_curImg.css("left")) + 200
            }, opts.animateTime * 0.6, function() {
              _curImg.animate({
                left: "-510px"
              }, opts.animateTime, function() {
                _imgBox.find(".text1, .text2, .img").css("left", widthWin);
                _imgBoxCur.removeClass("present");
              });
            });
          }, 400);
          //下一帧动画
          setTimeout(function() {
            _imgBoxNext.addClass("present");
            _nextText1.animate({
              left: (widthWin - 980) / 2 - 100
            }, opts.animateTime, function() {
              _nextText1.animate({
                left: (widthWin - 980) / 2
              }, opts.animateTime * 0.6);
            });
            setTimeout(function() {
              _nextText2.animate({
                left: (widthWin - 980) / 2 - 100
              }, opts.animateTime, function() {
                _nextText2.animate({
                  left: (widthWin - 980) / 2
                }, opts.animateTime * 0.6);
              });
            }, 200);
            setTimeout(function() {
              _nextImg.animate({
                left: (widthWin - 980) / 2 + 370
              }, opts.animateTime, function() {
                _nextImg.animate({
                  left: (widthWin - 980) / 2 + 470
                }, opts.animateTime * 0.6, function() {
                  index++;
                  if(index >= size) {
                    index = 0;
                  }
                  _imgBoxCur = _imgBox.filter(".present");
                  _imgBoxNext = _imgBox.eq(index);
                  _curText1 = _imgBoxCur.find(".text1");
                  _curText2 = _imgBoxCur.find(".text2");
                  _curImg = _imgBoxCur.find(".img");
                  _nextText1 = _imgBoxNext.find(".text1");
                  _nextText2 = _imgBoxNext.find(".text2");
                  _nextImg = _imgBoxNext.find(".img");
                });
              });
            }, 400);
          }, opts.density * 1200);
        }
      }
    });
  };
})(jQuery);

$(function() {
  $(".animateSlide").animateSlide({
    btnL: ".animateSlideBtnL",
    btnR: ".animateSlideBtnR",
    imgBox: ".animateSlideImgBox",
    animateTime: 500,
    delayTime: 6000,
    density: 0.9
  });
});
(0)

相关推荐

  • jQuery animate easing使用方法图文详解

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: • properties:一组包含作为动画属性和终值的样式属性和及其值的集合 • duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:100

  • jQuery的animate函数实现图文切换动画效果

    在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程. <div class="wrap"> <img src="images/s1.jpg" alt="photo" /> <div class="cover"> <h3>强震摧毁加勒比海小国海地</h3> <

  • 基于jquery animate操作css样式属性小结

    昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

  • 深入理解jquery自定义动画animate()

    在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash.这里 说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉. <!DOCTYPE html> <html xmlns="http://www.w3.org/1

  • jQuery实现立体式数字动态增加(animate方法)

    1.HTML结构 <div class="integral">已有<span class="ii"></span>积分</div> 2.js <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src

  • jQuery中使用animate自定义动画的方法

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别. $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画. 语法: 1 .animate( properties [, duration ]

  • jquery使用animate方法实现控制元素移动

    本文实例讲述了jquery使用animate方法实现控制元素移动.分享给大家供大家参考.具体分析如下: 通过jquery的animate方法控制元素移动,这里需要将元素的位置定义为relative, fixed, 或者 absolute! <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(docume

  • 分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

    我写文章的风格就是喜欢在开头讲问题法伤的背景: 因为最近要做个操作选项的呼出,然后就想到了用默认隐藏,鼠标划过的时候显示的方法. 刚开始打算添加一个class="active",直接触发mouseover(或者mouseenter)的时候add,mouseout(或者mouseleave)的时候remove,这个解决方法很简单,也很实用,但是体验上可能不是那么酷炫(好吧,这个词用的,瞬间感觉好low啊),所以就想到了用animate或者slide这些jQuery的动画,然后一开始讲真,

  • jQuery中animate动画第二次点击事件没反应

    用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,

  • jQuery中animate的几种用法与注意事项

    一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

  • js实现类似jquery里animate动画效果的方法

    本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

随机推荐