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


Posted in Javascript onJune 11, 2015

首页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
  });
});
Javascript 相关文章推荐
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 #Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 #Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 #Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 #Javascript
JQuery节点元素属性操作方法
Jun 11 #Javascript
JQuery包裹DOM节点的方法
Jun 11 #Javascript
JQuery替换DOM节点的方法
Jun 11 #Javascript
You might like
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
php将html转为图片的实现方法
2017/05/19 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
原生js无缝轮播插件使用详解
2020/03/09 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python利用微信公众号实现报警功能
2018/06/10 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
法院授权委托书格式
2014/09/28 职场文书
2015年采购部工作总结
2015/04/23 职场文书
领导视察通讯稿
2015/07/18 职场文书
高一数学教学反思
2016/02/18 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
在python中读取和写入CSV文件详情
2022/06/28 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技